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回答

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

您可以将:has() Selector与:not()选择器

结合使用

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

Answer 2

您可以使用parents代替closest来查找当前元素的祖先。除了祖先之外，closest匹配当前元素。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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个元素。

jQuery找到.Selector但不是嵌套的选择器（.selector .selector）

3 个答案: