我想找到与选择器匹配的所有元素,但如果它已经包含在匹配的元素中,则不想找到。
$('#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
而不是closest
来查找当前元素的祖先。CCD_ 8除了匹配祖先之外还匹配当前元素。
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>
您可以将:has()
选择器与:not()
选择器结合使用
$('div').find('[role="tabpanel"]:not(:has([role="tabpanel"]))');
你可以使用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
元素的背景色。