[英]jQuery find .Selector but not nested selector (.selector .selector)
I would like to find all elements which match a selector but not if it is already contained in a matching element. 我想找到所有匹配选择器的元素,但是如果它已经包含在匹配元素中则不会。
$('#container').find('.child').not('.child .child');
note that the .child elements are not necessary direct descendants. 请注意,.child元素不是必需的直接后代。
why doesn't this work ? 为什么这不起作用?
I would like to select all element which would appear in $('#container').find('.child')
but exclude/ filter()
any which would be in here $('#container').find('.child .child')
because one of its ancestors is a .child
我想选择所有出现在
$('#container').find('.child')
元素$('#container').find('.child')
但排除/ filter()
任何将在这里的元素$('#container').find('.child .child')
因为它的一个祖先是.child
var children = $('#container').find('.child').filter(function (i, el) {
return !$(el).closest('.child').length;
});
for some reason this doesn't work either JSFIDDLE 由于某种原因,这不适用于JSFIDDLE
snippet adapted from @RonenCypis answer 片段改编自@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>
您可以使用:has()
Selector与:not()
选择器一起使用
$('div').find('[role="tabpanel"]:not(:has([role="tabpanel"]))');
You can use parents
instead of closest
to find ancestors of the current element. 您可以使用
parents
而不是closest
来查找当前元素的祖先。 closest
matches the current element in addition to ancestors. 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>
Demo in the JsFiddle 在JsFiddle演示
You can use filter()
for that: 您可以使用
filter()
:
HTML 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 CSS
#container div {
display: inline-block;
width: 50px;
height: 50px;
margin: 10px;
background-color: red;
}
Javascript 使用Javascript
var selector = '.child';
var children = $('#container').find(selector).filter(function(i, el){
return $(el).find(selector).length == 0;
});
children.css('background-color', 'blue');
This code will change the background color only for .child
elements that doesn't have additional .child
elements inside them. 此代码仅更改
.child
元素的背景颜色, .child
包含其他.child
元素。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.