Quel sélecteur JQuery exclut les éléments avec un parent correspondant à un sélecteur donné?

j’ai

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

comme moyen de sélectionner tous les éléments dont les classes sont soit foo ou bar et qui ne descendent pas d’un élément dont la classe est baz . Y a-t-il un sélecteur qui accomplira la même chose sans avoir besoin de filtrer le lambda?

 

La vérité est que jQuery n’a tout simplement pas une manière particulièrement élégante de faire ce que vous voulez. Bien que la réponse du chaos fonctionne, vous devez vous demander si le sélecteur compliqué (qui serait à peu près aussi lent qu’un sélecteur peut être sur une page Web compliquée) vaut la peine d’être remplacé par la fonction de filtre plus verbeuse mais plus rapide dont vous disposez. Ce n’est pas vraiment un gros problème, je suis juste fatigué personnellement des sélecteurs particulièrement longs et compliqués quand je peux l’éviter.

Une autre option consiste à créer votre propre sélecteur, car jQuery est génial:

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

La carte expr fait partie du moteur de sélection Sizzle et la documentation peut être trouvée ici: Pseudo-sélecteurs personnalisés Sizzle

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

Je ne pouvais pas faire fonctionner ceci:

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

Mais je peux faire fonctionner ceci:

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

Note: Je ne sais pas si cela a quelque chose à voir avec la version de jQuery que j’utilise 1.2.6

essaye celui-là:

  $('div') .filter(function () { return ($(this).parent().not('.baz')); }) 

Le chaos sélecteur donne devrait fonctionner:

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

Je voulais juste vous donner un conseil sur une extension de FireBug appelée FireFinder que vous pouvez utiliser pour tester vos sélecteurs css / jquery.

À partir du site Web: Firefinder est une extension de Firebug (dans Firefox) et offre la fonctionnalité pour trouver rapidement des éléments HTML correspondant au (x) sélecteur (s) CSS ou à l’expression XPath. Il vous permet de tester instantanément vos sélecteurs CSS dans la page tout en affichant le contenu en même temps, et les éléments correspondants seront mis en évidence.

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

J’utilise le thème Roots et ils modifient les menus déroulants de “sous-menu” à “.dropdown-menu”

Ajoutez un: not (‘. Baz’) à votre sélecteur de niveau supérieur.