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

Question

我有一个div ，我想和它的所有children一起隐藏。 我认为一个简单的selector.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/

有任何想法吗？

Answer 1

如果要仅隐藏具有两个类的类，则不需要类之间的空格

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

要么做或添加逗号

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

Answer 2

$（ '行'）隐藏（）。

请删除第二堂课

Answer 3

你所拥有的东西不起作用，因为.row .well意思是“一个内部类well的元素（作为一个孩子或更深的后代）一个带有类row的元素。在CSS中，空间是后代组合子 。

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

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

这意味着“与类的元素row和类well ”。

Answer 4

从我读过的意见.well类是故意创建指定.row类将被隐藏，因为你有很多的row类。 然后你可以用它作为触发来隐藏那一row ，而不是做： $('.row.well').hide(); 你可以通过这样做简单地指定目标类：

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

点击这里查看jsFiddle的例子