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
source

2

utiliser le sélecteur not dans jquery

— abhijit

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
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
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
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
source

3

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

c'est ce dont vous avez besoin je pense.

— abhijit
source

3

Ça devrait le faire:

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

— iappwebdev
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
source