jQuery查找 .选择器，但不是嵌套选择器 (.选择器 .选择器)。

Question

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

$('#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

代码片段改编自@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>

- TarranJones

Answer 1

您可以将 :has() 选择器 与 :not() 选择器一起使用。

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

- Satpal

---

抱歉，无法让它正常工作。您有一个可行的例子吗？ - TarranJones

Answer 2

你可以使用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>

- Heretic Monkey

Answer 3

在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元素的背景颜色。

- Ronen Cypis

---

谢谢您提供这个很好的例子，但那不是我要问的。使用您的例子，只有顶层的 .child 应该改变颜色，因为其他元素都在 .child 元素内部。 - TarranJones

@TarranJones，我可能没有完全理解你想要实现的目标。你能否澄清一下？ - Ronen Cypis

“在JsFiddle上的演示” - 为什么要使用第三方网站，当我们已经有了这个功能一年多了？（参考链接：https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/） - Quentin

@Quentin 因为 (a) 几乎没有人知道该功能的存在 (b) 人们更喜欢使用拥有更多功能的熟悉网站，而不是 Snippets。 - Ian Kemp