Sélecteur jQuery «Tout sauf pas»

89

Je peux sélectionner (en utilisant jQuery) tous les divs dans un balisage HTML comme suit:

$('div')

Mais je veux exclure un particulier div(disons avoir id="myid") de la sélection ci-dessus.

Comment puis-je faire cela en utilisant les fonctions Jquery?

javascript jquery jquery-selectors siva636
la source
2
utiliser le sélecteur not dans jquery
abhijit

Réponses:

171

Facile:

$('div').not('#myid');

L'utilisation .not()supprimera les éléments correspondant au sélecteur qui lui est donné de l'ensemble renvoyé par $('div').

Vous pouvez également utiliser le :not()sélecteur:

$('div:not(#myid)');

Les deux sélecteurs font la même chose, mais :not()c'est plus rapide , probablement parce que le moteur de sélection de jQuery Sizzle peut l'optimiser en un .querySelectorAll()appel natif .

Bojangles
la source
1
@Raynos Je ne pense pas que ce soit forcément mauvais , mais utiliser .not()c'est bien, bien mieux que :not().
Bojangles
1
Je pense que ça devrait être $('div:not(#myid)');(sans guillemets). @Raynos: Pourquoi? :not()est un sélecteur CSS3. jQuery peut passer directement le sélecteur à querySelectorAlls'il est pris en charge ...
Felix Kling
@FelixKling c'est très bien dans le cadre de selectors4 . Cependant, dans jQuery, c'est plus lent .notet moins lisible. J'aurais dû dire ": pas de sélecteur dans jQuery"
Raynos
@Raynos: Aucune spécification des sélecteurs n'a jamais autorisé les citations à l'intérieur :not(). Ce sélecteur n'est pas non plus nouveau dans Selectors 4, ni n'a été modifié pour autoriser les citations. Il a cependant été modifié pour permettre des sélecteurs plus complexes. Sauf si j'ai mal compris votre commentaire ...
BoltClock
1
@PeterKrauss Je viens de faire un benchmark jsPerf qui marque querySelectorAllcomme le plus rapide. Ce n'est pas une référence du monde réel, mais il faut s'y attendre car il n'y a pas de surcharge de la part de jQuery interne. :not()est en fait plus rapide, probablement parce que Sizzle sait qu'il peut l'optimiser pour l'utiliserquerySelectorAll()
Bojangles
9 
var els = toArray(document.getElementsByTagName("div"));
els.splice(els.indexOf(document.getElementById("someId"), 1);

Vous pouvez simplement le faire à l'ancienne. Pas besoin de jQuery avec quelque chose d'aussi simple.

Conseils de pro:

Un ensemble d'éléments dom n'est qu'un tableau, utilisez donc votre toArrayméthode préférée sur un NodeList.

L'ajout d'éléments à un ensemble est juste

set.push.apply(set, arrOfElements);

Supprimer un élément d'un ensemble est

set.splice(set.indexOf(el), 1)

Vous ne pouvez pas facilement supprimer plusieurs éléments à la fois :(

Raynos
la source
1
De nos jours (2017) peut-être l'utilisation de Javascript natif .querySelector()ou .querySelectorAll()avec div:not(#myid) est-elle plus rapide ... Vraiment?
Peter Krauss
8 
$("div:not(#myid)")

[doc]

ou

$("div").not("#myid")

[doc]

sont les principaux moyens de sélectionner tous les identifiants sauf un

Vous pouvez voir la démo ici

genèse
la source
Aujourd'hui (2017) $("div:not(#myid)") est peut - être plus rapide ... Vérifiez l' optimisation de sizzlejs pour cela, lorsque vous utilisez Javascript natif .querySelector()ou .querySelectorAll().
Peter Krauss du
4 
   var elements =  $('div').not('#myid');

Cela inclura tous les divs sauf celui avec l'identifiant 'myid'

Ehtesham
la source
3 
$('div:not(#myid)');

c'est ce dont vous avez besoin je pense.

abhijit
la source
3

Ça devrait le faire:

$('div:not("#myid")')
iappwebdev
la source
3

Vous utilisez la .notpropriété de la bibliothèque jQuery:

$('div').not('#myDiv').css('background-color', '#000000');

Voyez-le en action ici . La div #myDiv sera blanche.

Kyle
la source