JQuery-Selektor "Alle, aber nicht"

88

Ich kann (mit jQuery) alle Divs in einem HTML-Markup wie folgt auswählen:

$('div')

Aber ich möchte ein bestimmtes div(sagen wir haben id="myid") von der obigen Auswahl ausschließen.

Wie kann ich dies mit Jquery-Funktionen tun?

javascript jquery jquery-selectors siva636
quelle
2
Verwenden Sie den Not-Selektor in jquery
abhijit

Antworten:

169

Einfach:

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

Mit using .not()werden Elemente, die mit dem ihm zugewiesenen Selektor übereinstimmen, aus dem von zurückgegebenen Satz entfernt $('div').

Sie können auch den :not()Selektor verwenden:

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

Beide Selektoren machen dasselbe, sind jedoch :not()schneller , vermutlich weil die Selektor-Engine von jQuery, Sizzle, sie in einen nativen .querySelectorAll()Aufruf optimieren kann .

Bojangles
quelle
1
@ Raynos Ich denke nicht, dass es unbedingt schlecht ist , aber die Verwendung .not()ist weitaus besser als :not().
Bojangles
1
Ich denke es sollte sein $('div:not(#myid)');(ohne Anführungszeichen). @ Raynos: Warum? :not()ist ein CSS3-Selektor. jQuery kann den Selektor direkt an übergeben, querySelectorAllwenn er unterstützt wird ...
Felix Kling
@FelixKling als Teil von selectors4 ist es in Ordnung . In jQuery ist es jedoch langsamer .notund weniger lesbar. Ich hätte sagen sollen ": nicht Selektor in jQuery"
Raynos
@ Raynos: Keine Selectors-Spezifikation hat jemals Anführungszeichen zugelassen :not(). Weder ist dieser Selektor neu für Selektoren 4, noch wurde er geändert, um Anführungszeichen zuzulassen. Es wurde jedoch geändert, um komplexere Selektoren zu ermöglichen. Es sei denn, ich habe Ihren Kommentar falsch verstanden ...
BoltClock
1
@PeterKrauss Ich habe gerade einen jsPerf-Benchmark durchgeführt, der querySelectorAllals der schnellste markiert . Kein realer Benchmark, aber zu erwarten, da jQuery intern keinen Overhead verursacht. :not()ist in der Tat schneller, vermutlich weil Sizzle weiß, dass es es für die Verwendung optimieren kannquerySelectorAll()
Bojangles
10 
var els = toArray(document.getElementsByTagName("div"));
els.splice(els.indexOf(document.getElementById("someId"), 1);

Sie könnten es einfach auf die altmodische Weise tun. Keine Notwendigkeit für jQuery mit etwas so Einfachem.

Profi-Tipps:

Eine Reihe von dom-Elementen ist nur ein Array. Verwenden Sie daher Ihre bevorzugte toArrayMethode für a NodeList.

Das Hinzufügen von Elementen zu einer Menge ist gerecht

set.push.apply(set, arrOfElements);

Das Entfernen eines Elements aus einer Menge ist

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

Sie können nicht einfach mehrere Elemente gleichzeitig entfernen :(

Raynos
quelle
1
In der heutigen Zeit (2017) ist die Verwendung von nativem Javascript .querySelector()oder .querySelectorAll()mit div:not(#myid) schneller vielleicht ... Ist es?
Peter Krauss
7 
$("div:not(#myid)")

[doc]

oder

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

[doc]

sind Hauptmethoden, um alle bis auf eine ID auszuwählen

Sie können die Demo hier sehen

Genesis
quelle
Heute (2017) ist vielleicht $("div:not(#myid)") schneller ... Überprüfen Sie die Sizzlejs- Optimierung darauf, wenn Sie natives Javascript verwenden .querySelector()oder .querySelectorAll().
Peter Krauss
4 
   var elements =  $('div').not('#myid');

Dies schließt alle Divs außer dem mit der ID 'myid' ein.

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

Das ist was du brauchst, denke ich.

abhijit
quelle
3

Das sollte es tun:

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

Sie verwenden die .notEigenschaft der jQuery-Bibliothek:

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

Sehen sie in Aktion hier . Das div #myDiv ist weiß.

Kyle
quelle