这似乎是一个容易出问题的问题但我在解决这个问题时遇到了一些麻烦。给出的示例是SSCCE,我有一个更大的问题,试图解决。为了使其工作,查询必须不包含任何直接子选择器(>
),因为dom树比这个例子复杂一点。
我的目标是选择所有不属于包含课程的家长的孩子。在此示例中,我尝试选择2个div容器hello
和world
,但不选择foo
和bar
。
这是一个为您提供便利的代码。 http://plnkr.co/edit/4zsKAFts5X7X2kLADj2V?p=preview
使用此HTML:
<div id="root" class="parent">
<div>
<div class="child">hello</div>
<div class="child">world</div>
</div>
<div class="parent">
<div>
<div class="child">foo</div>
<div class="child">bar</div>
</div>
</div>
</div>
这个Javascript:
var root = $('#root');
$(':not(.parent) .child', root).css('font-weight', 'bold');
我看到了这个结果:
你好
世界
FOO
巴
但我想得到的是
你好
世界
FOO
巴
重申我希望从给定节点(在此示例中为child
)中获取类parent
的所有没有父类#root
的元素。
答案 0 :(得分:3)
var root = $('#root');
$('.child', root).not($("#root .parent .child")).css('font-weight', 'bold');
<强> jsFiddle example 强>
答案 1 :(得分:1)
这可能不是很漂亮但是你去了:
$('#root').find('.child').filter(function(){
if($(this).parents('.parent').first().attr('id') === 'root'){
return 1;
}
else{
return 0;
}
}).css('font-weight', 'bold');
<强> http://jsfiddle.net/PDZL8/ 强>
答案 2 :(得分:1)
JSFiddle:http://jsfiddle.net/TrueBlueAussie/78G6N/3/
var root = $('#root');
$('#root').find('.child').filter(function(){
return $(this).closest('.parent').is(root);
}).css('font-weight', 'bold');
我还改进了j08691的解决方案,以便它使用提供的根节点,而不是复制选择器(不可移植):
http://jsfiddle.net/TrueBlueAussie/78G6N/4/
var root = $('#root');
$('.child', root).not(root.find(".parent .child")).css('font-weight', 'bold');
答案 3 :(得分:0)
您可以使用:
$('#root').find('.child').filter(function(){
return $(this).parents('.parent').length <= 1;
}).css('font-weight', 'bold');
检查div的父亲数,如果它低于或等于1,则返回孩子。
答案 4 :(得分:0)
$("#root .child:not(#root .parent * .child)")
.css("font-weight", "bold")