jQuery 找到 .Selector 但不是嵌套选择器 (.selector .selector)答案

【问题标题】：jQuery find .Selector but not nested selector (.selector .selector)jQuery 找到 .Selector 但不是嵌套选择器 (.selector .selector)
【发布时间】：2016-02-21 14:32:55
【问题描述】：

我想查找与选择器匹配的所有元素，但如果它已包含在匹配元素中，则不查找。

$('#container').find('.child').not('.child .child');

请注意，.child 元素不是必需的直接后代。

为什么这不起作用？

我想选择所有将出现在$('#container').find('.child') 中的元素，但排除/filter() 任何会出现在$('#container').find('.child .child') 中的元素，因为它的祖先之一是.child

var children = $('#container').find('.child').filter(function (i, el) {
    return !$(el).closest('.child').length;
});

由于某种原因，这也不起作用JSFIDDLE

sn-p 改编自 @RonenCypis 答案

var selector = ' .child ';
var children = $('#container').find(selector).filter(function(i, el) {
  return !$(el).closest(selector).length;
});
children.css('background-color', 'blue');

#container div {
  float: left;
  display: inline-block;
  width: 50px;
  height: 50px;
  color: #fff;
  margin: 10px;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div class="child">one
    <div class="child">one one</div>
  </div>
  <div class="child">two
    <div class="child">two one</div>
  </div>
  <div class="child">three</div>
  <div class="child">four
    <div class="child">four one</div>
  </div>
</div>

【问题讨论】：

标签： javascript jquery

【解决方案1】：

您可以将:has() Selector 与:not() 选择器结合使用

$('div').find('[role="tabpanel"]:not(:has([role="tabpanel"]))');

【讨论】：

很抱歉不能让它工作你有一个工作的例子吗？

【解决方案2】：

JsFiddle中的演示

您可以为此使用filter()：

HTML

<div id="container">
    <div class="child">
        <div class="child"></div>
    </div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child">
        <div class="child"></div>
    </div>
</div>

CSS

#container div {
    display: inline-block;
    width: 50px;
    height: 50px;
    margin: 10px;
    background-color: red;
}

Javascript

var selector = '.child';
var children = $('#container').find(selector).filter(function(i, el){
    return $(el).find(selector).length == 0;
});

children.css('background-color', 'blue');

此代码将仅更改其中没有其他 .child 元素的 .child 元素的背景颜色。

【讨论】：

感谢很好的例子，但这不是我要求的，使用你的例子只有顶层 .child 应该改变颜色，因为其他的在 .child 元素中
@TarranJones，所以我可能不明白你到底想达到什么目的。你能澄清一下吗？
“JsFiddle 中的演示”——we've had this 一年多了，为什么还要使用第三方网站？
@Quentin 因为 (a) 几乎没有人知道该功能的存在 (b) 人们更愿意使用功能比 Snippets 更多的熟悉网站。

【解决方案3】：

您可以使用parents 而不是closest 来查找当前元素的祖先。 closest 匹配当前元素和祖先元素。

var selector = ' .child ';
var children = $('#container').find(selector).filter(function(i, el) {
  return !$(el).parents(selector).length;
});
children.css('background-color', 'blue');

#container div {
  float: left;
  display: inline-block;
  width: 50px;
  height: 50px;
  color: #fff;
  margin: 10px;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div class="child">one
    <div class="child">one one</div>
  </div>
  <div class="child">two
    <div class="child">two one</div>
  </div>
  <div class="child">three</div>
  <div class="child">four
    <div class="child">four one</div>
  </div>
</div>

【讨论】：