jquery - 如何只获得父母的“直接”孩子？

Question

具有这样的html结构：

<div id="parent1" class="parent">
   <div class="child">1<div/>
   <div>
       <div class="child">2</div>
   </div>

   <div id="parent2" class="parent">
      <div class="child">3</div>
      <div>
         <div class="child">4</div>
      </div>
      <div id="parent3" class="parent">
         <div class="child">5</div>
      </div>
   </div>
</div>

我如何编写一个只返回指定父级的直接子级的选择器？因此，对于 parent2，我想获得孩子 3 和孩子 4，而不是孩子 5。

Answer 1

您的问题有点令人困惑，我认为选择器将基于您的实际 html，但我认为这应该适用于您的具体示例：

http://jsfiddle.net/4ZQ4C/

$('.parent .child:not(".parent .parent .child")').addClass('selected');

Answer 2

对于jQuery,children()将遍历单个级别的DOM.

$('.parent').children('.child').each(function() {

    // do something with each of the direct decedents

});

在您的情况下，这意味着您将返回“第一个”.child和“第三个”.child条目，从上到下读取HTML.

Answer 3

试试这个 http://jsfiddle.net/9sSqE/

或者可以使用closest http://api.jquery.com/closest/ 演示 http://jsfiddle.net/T26Sa/

希望这符合您的需求:)

代码

$('.parent').each(function () {
    $(this).find('.child').html('HULK ---- Found');
    alert($(this).html());
});

Answer 4

CSS 很简单

.parent > .child

http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/