选择不在容器jquery中的孩子

Question

这似乎是一个简单的问题，但我在解决这个问题时遇到了一些麻烦。给出的示例是SSCCE，我有一个更大的问题试图解决。为了使它工作，查询不能包含任何直接子选择器 (>)，因为 dom 树比这个例子复杂一点。

我的目标是选择所有不在包含类的父级之下的子级。在此示例中，我尝试选择 2 个 div 容器 hello 和 world，但不选择 foo 和 bar。

这是一个 plunker，其中包含代码以方便您使用。 http://plnkr.co/edit/4zsKAFts5X7X2kLADj2V?p=preview

---

使用此 HTML：

<div id="root" class="parent">
  <div>
    <div class="child">hello</div>
    <div class="child">world</div>
  </div>
  <div class="parent">
    <div>
      <div class="child">foo</div>
      <div class="child">bar</div>
    </div>
  </div>
</div>

还有这个 Javascript：

var root = $('#root');
$(':not(.parent) .child', root).css('font-weight', 'bold');

---

我看到了这个结果：

你好

世界

富

条形

但我想得到的是

你好

世界

富

酒吧

---

重申一下，我想从给定节点（在本例中为 #root）开始，获取所有类为 child 且没有父类为 parent 的元素。

Answer 1

var root = $('#root');
$('.child',  root).not($("#root .parent .child")).css('font-weight', 'bold');

jsFiddle example

Answer 2

它可能不漂亮，但给你：

$('#root').find('.child').filter(function(){
    if($(this).parents('.parent').first().attr('id') === 'root'){
        return 1;
    }
    else{
        return 0;
    }
}).css('font-weight', 'bold');

http://jsfiddle.net/PDZL8/

Answer 3

JSFiddle：http://jsfiddle.net/TrueBlueAussie/78G6N/3/

var root = $('#root');
$('#root').find('.child').filter(function(){
    return $(this).closest('.parent').is(root);
}).css('font-weight', 'bold');

我还改进了 j08691 的解决方案，使其使用提供的根节点，而不是复制选择器（不可移植）：

http://jsfiddle.net/TrueBlueAussie/78G6N/4/

var root = $('#root');
$('.child',  root).not(root.find(".parent .child")).css('font-weight', 'bold');

Answer 4

你可以用这个：

$('#root').find('.child').filter(function(){
    return $(this).parents('.parent').length <= 1;
}).css('font-weight', 'bold');

它检查 div 的父级数量，如果小于或等于 1，则返回子级。

小提琴：http://jsfiddle.net/akwPb/

Answer 5

    $("#root .child:not(#root .parent * .child)")
    .css("font-weight", "bold")

jsfiddle http://jsfiddle.net/guest271314/UJJXU/