jQuery / Methode / .not() - Elemente aus einer Auswahl ausschließen

jQuerys .not() liefert ein neues jQuery-Objekt ohne passende Mitglieder der aktuellen Auswahl. Es entfernt diese Elemente nicht aus dem Document Object Model (DOM) und blendet sie nicht automatisch aus. Bei einer Prüffunktion werden Elemente mit Rückgabe true ausgeschlossen.

not schließt aus, filter behält Treffer

Die .not()-API akzeptiert Selektorzeichenketten, DOM-Elemente/Arrays, jQuery-Objekte und Funktionen. Alle prüfen Mitglieder einer bestehenden Auswahl, statt neue Nachfahren innerhalb der Elemente zu suchen.

.filter() behält Treffer und arbeitet bei gleicher Bedingung entgegengesetzt. Geben Sie in Prüffunktionen ausdrücklich boolesche Werte zurück. Die neue Menge enthält Referenzen bestehender Knoten, keine Kopien; .addClass() ändert daher die tatsächlichen Elemente.

Ausschluss und Dokumentanzahl vergleichen

Speichern Sie alles in UTF-8 als not-demo.html und öffnen Sie es im Browser. Für die offizielle jQuery-Datei 4.0.0 vom Content Delivery Network (CDN) brauchen Sie Internet, aber keine Installation. Selektor-, Funktions- und Referenztests, Klassenänderung, dynamisches Hinzufügen und Reset wurden mit 3.7.1 und 4.0.0 ausgeführt.

Alpha ist normal, Beta locked, Gamma featured, Delta beides. Nur verbleibende Mitglieder erhalten picked; ausgeschlossene bleiben sichtbar. source zählt die Ausgangsmenge, kept das Ergebnis, in DOM die Dokumentelemente.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Exclude elements from a jQuery collection</title>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
  <style>
    body { font: 16px/1.6 sans-serif; max-width: 760px; margin: 24px auto; padding: 16px; }
    button, select { font: inherit; margin: 4px; }
    li { padding: 8px; margin: 4px; border: 1px solid #aab; }
    .picked { background: #d9f4ef; border-color: teal; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Filter a collection without removing nodes</h1>
  <label for="mode">Exclude:</label>
  <select id="mode"><option value="locked">Locked class</option><option value="multi">Locked or featured</option><option value="callback">Even collection indices</option><option value="nodes">Beta and Delta node references</option></select>
  <button type="button" id="toggle">Toggle Alpha locked</button>
  <button type="button" id="add">Add Epsilon</button>
  <button type="button" id="reset">Reset</button>
  <ul id="items"><li id="alpha" data-name="Alpha">Alpha</li><li id="beta" class="locked" data-name="Beta">Beta (locked)</li><li id="gamma" class="featured" data-name="Gamma">Gamma (featured)</li><li id="delta" class="locked featured" data-name="Delta">Delta (locked, featured)</li></ul>
  <pre id="result" aria-live="polite"></pre>
  <script>
    $(function () {
      const initial = $("#items").html();
      function update() {
        const $all = $("#items > li");
        let $kept;
        switch ($("#mode").val()) {
          case "multi": $kept = $all.not(".locked, .featured"); break;
          case "callback": $kept = $all.not(function (index) { return index % 2 === 0; }); break;
          case "nodes": $kept = $all.not($("#beta, #delta")); break;
          default: $kept = $all.not(".locked");
        }
        $all.removeClass("picked");
        $kept.addClass("picked");
        const names = $kept.map(function () { return this.dataset.name; }).get();
        $("#result").text(`source=${$all.length} | kept=${$kept.length} | in DOM=${$("#items > li").length}\nkept=${names.join(", ")}`);
      }
      $("#mode").on("change", update);
      $("#toggle").on("click", function () { $("#alpha").toggleClass("locked"); update(); });
      $("#add").on("click", function () {
        if (!$("#epsilon").length) $('<li id="epsilon" data-name="Epsilon">Epsilon</li>').appendTo("#items");
        update();
      });
      $("#reset").on("click", function () { $("#items").html(initial); $("#mode").val("locked"); update(); });
      update();
    });
  </script>
</body>
</html>

Anfangs bleiben ohne locked Alpha und Gamma:

source=4 | kept=2 | in DOM=4
kept=Alpha, Gamma

1. Locked or featured hebt nur Alpha hervor. Das Komma schließt Treffer einer beliebigen Bedingung aus.
2. Even collection indices entfernt die Indizes 0 und 2 aus dem Ergebnis, Beta und Delta bleiben. Der erste Eintrag hat Index 0.
3. Beta and Delta node references übergibt diese echten Knoten als jQuery-Objekt und lässt Alpha/Gamma.
4. Zurück bei Locked class macht Toggle Alpha locked nur Gamma hervorgehoben. Nochmals stellt Alpha wieder her.
5. Add Epsilon ergänzt ein normales Element einmal. Bei gesperrtem Alpha bleiben Gamma und Epsilon; source und in DOM werden 5.
6. Reset stellt die ersten vier Elemente/Klassen und Locked class wieder her.

Funktionsindizes und Knotenidentität

index in .not(function(index, element)) ist nullbasiert innerhalb der aktuellen jQuery-Menge, nicht zwangsläufig die Geschwisterposition im Elternteil. In einer normalen function bezeichnen this und element den geprüften DOM-Knoten. True schließt aus; geben Sie nicht versehentlich die Bedingung der zu behaltenden Elemente zurück.

Führen Sie diesen vollständigen Teilcode in der Entwicklerkonsole aus. Drei temporäre, nicht eingefügte i-Elemente vergleichen not/filter, Funktion und echte Knoten gegenüber Kopien. Die letzten Zeilen bereinigen sie.

const $items = $('<i class="skip">A</i><i>B</i><i class="skip">C</i>');
console.log(`not=${$items.not(".skip").text()} | filter=${$items.filter(".skip").text()}`);
console.log(`source=${$items.length} | callback=${$items.not(function (index) { return index === 1; }).text()}`);
const $copy = $items.eq(1).clone();
console.log(`exclude same node=${$items.not($items.eq(1)).length} | exclude copy=${$items.not($copy).length}`);
$copy.remove();
$items.remove();

not=B | filter=AC
source=3 | callback=AC
exclude same node=2 | exclude copy=3

Das ursprüngliche $items.length bleibt nach .not() bei 3. Der zweite Knoten selbst lässt zwei übrig, sein gleich aussehender clone dagegen alle drei: Er ist ein anderes Objekt. Prüfen Sie bei extern erhaltenen Referenzen den echten Zielknoten statt ähnlicher Selektoren oder Markups.

Selektorbereich und veränderlichen Zustand prüfen

Einfache Zeichenkettenbedingungen lassen sich auch mit dem :not()-Selektor ausdrücken. #items > li:not(.locked) nimmt im gleichen li-Bereich locked aus. Bei mehreren Bedingungen, Referenzen oder Funktionen kann eine Basismenge mit getrennten .not()-Tests lesbarer sein.

.not(".locked, .featured") schließt eine beliebige Klasse aus; .not(".locked.featured") nur Elemente mit beiden. Ohne Punkt ist locked ein Tagname. Eine Kind-span-Bedingung schließt nicht automatisch dessen li-Elternteil aus; unterscheiden Sie geprüfte Mitglieder und Nachfahren.

Das Ergebnis ist keine automatisch aktualisierte Liste. update() wählt li jedes Mal neu und filtert erneut, wodurch Epsilon und Klassenänderungen erfasst werden. Gespeicherte Ergebnisse folgen späteren Änderungen nicht automatisch. Auch leer bleibt ein jQuery-Objekt: Prüfen Sie .length und legen Sie eine echte Entfernung als getrennte Folgeaktion fest.