Selettore jQuery "Tutto ma non"

89

Posso selezionare (usando jQuery) tutti i div in un markup HTML come segue:

$('div')

Ma voglio escludere un particolare div(diciamo avere id="myid") dalla selezione di cui sopra.

Come posso farlo utilizzando le funzioni Jquery?

javascript jquery jquery-selectors

— siva636
fonte

2

utilizzare il selettore non in jquery

— abhijit

171

Semplice:

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

L'uso .not()rimuoverà gli elementi corrispondenti al selettore assegnatogli dal set restituito da $('div').

Puoi anche usare il file :not() selettore:

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

Entrambi i selettori fanno la stessa cosa, tuttavia :not()è più veloce , presumibilmente perché il motore di selezione di jQuery Sizzle può ottimizzarlo in una .querySelectorAll()chiamata nativa .

— Bojangles
fonte

1

@ Raynos Non penso che sia necessariamente un male , ma usare .not()è molto, molto meglio di :not().

— Bojangles

1

Penso che dovrebbe essere $('div:not(#myid)');(senza virgolette). @ Raynos: perché? :not()è un selettore CSS3. jQuery può passare direttamente il selettore a querySelectorAllse supportato ...

— Felix Kling

@FelixKling va bene come parte dei selettori4 . Tuttavia in jQuery è più lento .note meno leggibile. Avrei dovuto dire ": non selettore in jQuery"

— Raynos

@ Raynos: Nessuna specifica dei selettori ha mai consentito le virgolette all'interno :not(). Né questo selettore è nuovo per Selectors 4, né è stato modificato per consentire le virgolette. Tuttavia, è stato modificato per consentire selettori più complessi. A meno che non abbia frainteso il tuo commento ...

— BoltClock

1

@PeterKrauss Ho appena fatto un benchmark jsPerf che segna querySelectorAllcome il più veloce. Non è un benchmark del mondo reale, ma c'è da aspettarselo visto che non c'è overhead dall'interno di jQuery. :not()è infatti più veloce, presumibilmente perché Sizzle sa di poterlo ottimizzare per l'usoquerySelectorAll()

— Bojangles

9

var els = toArray(document.getElementsByTagName("div"));
els.splice(els.indexOf(document.getElementById("someId"), 1);

Potresti farlo alla vecchia maniera. Non c'è bisogno di jQuery con qualcosa di così semplice.

Suggerimenti per professionisti:

Un insieme di elementi dom è solo un array, quindi usa il tuo toArraymetodo preferito su un fileNodeList .

Aggiungere elementi a un set è solo

set.push.apply(set, arrOfElements);

Rimuovere un elemento da un insieme è

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

Non puoi rimuovere facilmente più elementi contemporaneamente :(

— Raynos
fonte

1

Al giorno d'oggi (2017) forse l'uso di Javascript nativo .querySelector()o .querySelectorAll()con div:not(#myid) è più veloce ... vero?

— Peter Krauss,

8

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

^[doc]

o

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

^[doc]

sono i modi principali per selezionare tutti gli ID tranne uno

Puoi vedere la demo qui

— genesi
fonte

Oggi (2017) forse $("div:not(#myid)") è più veloce ... Controlla l' ottimizzazione di sizzlejs per questo, quando usi Javascript nativo .querySelector()o .querySelectorAll().

— Peter Krauss,

4

   var elements =  $('div').not('#myid');

Questo includerà tutti i div tranne quello con ID "myid"

— Ehtesham
fonte

3

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

questo è ciò di cui hai bisogno, penso.

— abhijit
fonte

3

Dovrebbe farlo:

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

— iappwebdev
fonte

3

Utilizzi la .notproprietà della libreria jQuery:

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

Guardalo in azione qui . Il div #myDiv sarà bianco.

— Kyle
fonte