jQuery - 具有行类的div的所有子节点

Question

之前可能已经提出这个问题，但我遇到了麻烦。我试图在div.panel-body中对所有div.row做一些jquery。

<div class="panel panel-body">
  <div class=row>
    ...
  </div>
</div>

我一直在尝试这样的事情

$(".panel-body").children(".row").mouseover(function(){ $(this).addClass("mover");}).mouseout(function(){ $(this).removeClass("mover");})

如果我只使用$(".row")，它可以正常工作但会影响您猜测class=row的所有元素。

我在这里缺少什么？

Answer 1

您可以使用子选择器来过滤.rows div。像这样。

$(".panel-body > .row")
  .mouseover( function() {  
  $(this).addClass("mover");})
  .mouseout( function() { 
  $(this).removeClass("mover");
})

请参阅jsfiddle了解样本。

Answer 2

$(".panel-body .row")

这将选择.panel-body的所有后代，其类别为.row。

查看此SO post了解更多信息。或jQuery API.

修改： 我假设您想要后代（意味着.panel-body和.row之间可能存在或不存在元素，但您可能只需 immediate 在这种情况下，你将使用@ TeaCode的答案。