Welcher JQuery-Selektor schließt Elemente mit einem übergeordneten Element aus, das einem bestimmten Selektor entspricht?

Question

Ich habe

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

als eine Möglichkeit, alle Elemente, deren Klassen zu wählen sind entweder foo oder bar und wer sie absteigen nicht von einem Element, dessen Klasse ist baz. Gibt es einen Selektor, der dasselbe erreicht, ohne dass ein Filter-Lambda benötigt wird?

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

Answer 1

Die Wahrheit der Sache ist, dass jQuery einfach nicht eine besonders elegante Möglichkeit hat, zu tun, was Sie wollen. Während die Antwort des Chaos funktioniert, müssen Sie sich fragen, ob der komplizierte Selektor (der ungefähr so ​​langsam wie ein Selektor in einer komplizierten Webseite sein könnte) sich über die ausführlichere, aber schnellere Filterfunktion, die Sie haben, lohnt. Das ist nicht wirklich so eine große Sache, ich bin nur persönlich von besonders langen, zusammengewürfelten Auswählern müde, wenn ich es vermeiden kann.

Eine andere Möglichkeit ist, Ihre eigenen Wähler zu erstellen, da jQuery ist genial:

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

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

Die expr Karte ist Teil der Sizzle-Selektor-Engine und die Dokumentation finden Sie hier: Sizzle Custom Pseudo-Selectors

Answer 2

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

Answer 3

hinzufügen: ('baz') nicht auf Ihren Top-Level-Selektor.

Answer 4

Der Wähler Chaos sollte gibt arbeiten:

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

Nur du FireFinder, die Sie verwenden können, um testen Sie Ihre CSS/jQuery Selektoren eine Spitze über eine Verlängerung FireBug genannt geben wollte.

Von der Website: Firefinder ist eine Erweiterung zu Firebug (in Firefox) und bietet die Funktionalität, auf schnelle Weise HTML-Elemente zu finden, die ausgewählten CSS-Selektoren oder XPath-Ausdruck entsprechen. Sie können Ihre CSS-Selektoren sofort auf der Seite testen, während Sie den Inhalt gleichzeitig sehen, und die übereinstimmenden Elemente werden hervorgehoben.

Answer 5

I couldn ‚t bekommen dies funktioniert:

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

Aber ich kann diese an die Arbeit:

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

Hinweis: Nicht sicher, ob dies etwas mit der jQuery-Version Ich bin mit 1.2.6

Answer 6

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

Ich verwende Roots Thema zu tun hat, und sie ändern, um die Dropdown-Listen von ‚sub- Menü ‚auf‘ .dropdown-Menü‘

Answer 7

versuchen diese:

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

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