jQuery - 如何隐藏一个元素及其子元素？

Question

我有一个

标签，我想隐藏它以及它所有的子元素。我认为简单的选择器.hide()就可以解决问题，但是它仍然存在。

HTML

<div class="row well">
  <div class="artistAlbumInfo well col-md-6 ">
    <h3><span id="artist"></span> - <span id="track"></span></h3>
    <img src="" id="art" class="albumArt">
  </div>
  <div class="col-md-6">
    <h3 id="album"></h3>
    <h4>Playstate <p id="playState"></p></h4>
    <h4>Position <p id="position"></p></h4>
  </div>
</div>

JQuery

$(document).ready(function() {
  $('.row .well').hide();
});

请看这里：

http://jsfiddle.net/375c8v2a/1/

你有什么想法吗？

- Richard Hamilton

---

你做错了，只需删除第二个类.well，然后只需要指向第一个类$('.row').hide();。在jsFiddle上查看在线示例-http://jsfiddle.net/375c8v2a/2/。 - Chun

我实际上有多个“行”，我只想针对具有两个类的那一行进行操作。 - Richard Hamilton

如果well是一个专门为了隐藏该行而创建的类，则可以使用它作为触发器来隐藏它，如下所示 - $('.well').hide();。 - Chun

Answer 1

如果您只想隐藏同时具有两个类的元素，则无需在类之间添加空格。

$('.row.well').hide();

要做到其中之一或者添加一个逗号。

$('.row, .well').hide();

- depperm

Answer 2

$('.row').hide();

请删除第二个类。

- Prashant Valanda

---

这样做不行，因为我实际上有多个 row 类。我包含了第二个类，试图找到更具体的选择。 - Richard Hamilton

Answer 3

你的操作不成功是因为 .row .well 的意思是“一个带有类名为row的元素内（作为其子元素或更深层次的后代），包含一个类名为well的元素。在CSS中，空格是后代组合器。

要选择同时具有这两个类的元素，请删除空格：

$(document).ready(function() {
  $('.row.well').hide();
  // ----^
});

这意味着“一个具有类名为row和well的元素”。

- T.J. Crowder

Answer 4

根据评论所说，.well类是有意创建的，用于指定要隐藏哪个.row类，因为有很多row类。然后您可以将其用作隐藏该row的触发器，而不是执行：$('.row.well').hide();，只需通过执行简单地指定目标类即可：

$('.well').hide();

点击这里查看 在 jsFiddle 上的示例。

- Chun