2009-06-08 87 views
62

什么JQuery选择器排除父项匹配给定选择器的项目?

var $set = $('.foo,.bar').filter(
    function() {return $(this).parents('.baz').length < 1;}); 

,以此来选择所有其类的元素或者foobar,谁不从一个元素,它的类是baz下降。有没有一个选择器可以完成同样的事情,而不需要过滤lambda? ( '巴兹')不是你的顶级选择:

<div class='foo'/><!--match this--> 
<div class='bar'/><!--match this--> 
<div class='baz'> 
    <div class='foo'/> <!--don't match this--> 
</div> 
+2

出所有我喜欢你做的最好的方式得到答案的。 – Dean 2012-08-09 23:03:12

+2

你可以使用`nearest`方法而不是`parents`来加快速度。 “最接近”一旦找到一个匹配元素,而“父”通过DOM树到达文档的根元素来查找匹配元素,就停止查找。 – RayOnAir 2016-08-11 19:27:43

回答

72

事情的真相是,jQuery根本没有一种特别优雅的方式来做你想做的事情。尽管混沌的答案确实起作用,但您不得不怀疑,复杂的选择器(与选择器的速度差不多,可能处于复杂的网页中)是否值得它胜过更冗长但更快速的过滤器功能。这并不是什么大不了的事情,当我能够避免时,我只是对特别长,令人费解的选择器感到厌倦。

不同的选择是创建你自己的选择,因为jQuery是真棒:

jQuery.expr[':'].parents = function(a,i,m){ 
    return jQuery(a).parents(m[3]).length < 1; 
}; 

$('.foo,.bar').filter(':parents(.baz)'); 

expr地图滋滋声选择器引擎和文档的一部分可以在这里找到:Sizzle Custom Pseudo-Selectors

+0

接受,因为它比混沌更完整 - 我在哪里可以找到有关expr数组API的文档? – 2009-06-08 18:00:17

28
$('.foo:not(.baz .foo),.bar:not(.baz .bar)') 
0

添加。

1

的选择混乱给出了应工作:

$('.foo:not(.baz .foo),.bar:not(.baz .bar)') 

只是想给你一个关于一个扩展名为FireBugFireFinder,你可以用它来测试你的CSS/jQuery选择提示。

来自网站:Firefinder是Firebug(在Firefox中)的扩展,它提供了快速查找与所选CSS选择器或XPath表达式匹配的HTML元素的功能。它允许您在查看内容的同时即时测试页面中的CSS选择器,并且将突出显示匹配的元素。

+0

+1为我介绍FireFinder – Dean 2012-08-09 23:06:16

14

我不能“T得到这个工作:

$(".children:not(#parent .children)"); 

但我可以得到这个工作:

$(".children").not($("#parent .children")); 

注:不知道这事做与jQuery的版本,我使用的是1.2.6

1

var $li = jQuery('li', this).not('.dropdown-menu > li');

我使用根主题,他们改变了下拉菜单从“子菜单“到” .dropdown菜单”

2

试试这个:

   $('div') 
       .filter(function() { 

        return ($(this).parent().not('.baz')); 
       })