2009-06-08 89 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')); 
       })