web-dev-qa-db-fra.com

Quel sélecteur JQuery exclut les éléments dont le parent correspond à 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 foo ou bar et qui ne descendent pas d'un élément dont la classe est baz. Existe-t-il un sélecteur qui accomplira la même chose sans avoir besoin d'un filtrage lambda?

<div class='foo'/><!--match this-->
<div class='bar'/><!--match this-->
<div class='baz'>
    <div class='foo'/> <!--don't match this-->
</div>
jqueryjquery-selectorscss-selectors
70
Dan Davies Brackett

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 dans une page Web compliquée) en vaut la peine par rapport à la fonction de filtre plus verbeuse mais plus rapide que vous avez. Ce n'est pas vraiment grave, je suis simplement fatigué des sélecteurs particulièrement longs et alambiqué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

79
Paolo Bergantino
$('.foo:not(.baz .foo),.bar:not(.baz .bar)')
30
chaos

Je n'ai pas pu faire fonctionner ça:

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

Mais je peux faire en sorte que cela fonctionne:

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

Remarque: je ne sais pas si cela a quelque chose à voir avec la version jQuery que j'utilise 1.2.6

18
going

essaye celui-là:

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

Le sélecteur chaos donne devrait fonctionner:

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

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

Depuis le site Web: Firefinder est une extension de Firebug (dans Firefox) et offre la fonctionnalité pour, de manière rapide, trouver des éléments HTML correspondant aux sélecteurs CSS ou à l'expression XPath choisis. Il vous permet de tester instantanément vos sélecteurs CSS dans la page tout en voyant le contenu en même temps, et les éléments correspondants seront mis en évidence.

1
BengtBe

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

J'utilise le thème Roots et ils changent les listes déroulantes de 'sous-menu' en '.dropdown-menu'

1
Devin Walker

Ajoutez a: not ('. Baz') à votre sélecteur de niveau supérieur.

0
Dave Ward