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/

如何只获得父母的“直接”子女？

4 个答案: