javascript – jQuery find .Selector但不是嵌套的选择器(.selector .selector)

我想找到所有匹配选择器的元素,但是如果它已经包含在匹配元素中则不会.

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

解决方法:

您可以使用parents而不是最近来查找当前元素的祖先.最近的匹配除了祖先之外的当前元素.

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>