jQuery Academy · Lektion

Elemente mit .not() ausschließen

Elemente mit .not() ausschließen ist eine kostenlose jQuery Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 3. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des jQuery Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der jQuery Academy-Kurs umfasst insgesamt 3 Lektionen.

Einführung in .not()

Willkommen! In dieser Lektion lernen Sie jQuerys leistungsfähige Methode .not() sicher zu beherrschen. Sie ist unverzichtbar, um Ihre Elementauswahlen zu verfeinern.

Mit der Methode .not() können Sie bestimmte Elemente ausschließen und so genau festlegen, auf welche Elemente Ihre Operationen angewendet werden.

Ausschließen mit einem Selektor-String

Am häufigsten wird .not() verwendet, indem ein CSS-Selektor-String übergeben wird. jQuery entfernt anschließend alle Elemente aus der aktuellen Auswahl, die diesem neuen Selektor entsprechen.

Wählen Sie zunächst eine große Menge aus.
Verwenden Sie anschließend .not(), um unerwünschte Elemente herauszufiltern.

Das ist nützlich, wenn es einfacher ist, zunächst 'alles' auszuwählen und anschließend festzulegen, was 'entfernt' werden soll.

.not() mit einem Klassen-Selektor

Probieren Sie dieses Beispiel aus. Wir wählen alle div-Elemente aus und verwenden anschließend .not(), um diejenigen mit der Klasse .special auszuschließen. Nur die nicht speziellen div-Elemente werden formatiert.

<!DOCTYPE html>
<html>
<head>
<style>
  .red { color: red; }
</style>
</head>
<body>
  <div class="box">Item 1</div>
  <div class="box special">Item 2</div>
  <div class="box">Item 3</div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      // Select all .box divs, then exclude the one with .special
      $('.box').not('.special').addClass('red');
    });
  </script>
</body>
</html>

Bestimmte Elemente ausschließen

Neben einem Selektor-String können Sie .not() auch direkt ein DOM-Element oder ein jQuery-Objekt übergeben.

Das ist praktisch, wenn Sie bereits eine Referenz auf genau das Element (oder die Elemente) besitzen, das beziehungsweise die Sie aus Ihrer aktuellen Auswahl ausschließen möchten.

.not() mit einer Elementreferenz

In diesem Beispiel wählen wir alle Listenelemente (<li>) aus. Anschließend identifizieren wir anhand seiner ID (#item2) ein bestimmtes Element und schließen es mit .not() aus der Formatierungsoperation aus.

<!DOCTYPE html>
<html>
<head>
<style>
  .bold { font-weight: bold; }
</style>
</head>
<body>
  <ul>
    <li>List Item 1</li>
    <li id="item2">List Item 2</li>
    <li>List Item 3</li>
  </ul>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      // Select all <li>, then exclude the specific #item2
      $('li').not($('#item2')).addClass('bold');
    });
  </script>
</body>
</html>

Benutzerdefiniertes Ausschließen mit einer Funktion

Für eine hochdynamische oder komplexe Ausschlusslogik können Sie eine Funktion an .not() übergeben.

Die Funktion wird für jedes Element der aktuellen Menge ausgeführt.
Wenn die Funktion true zurückgibt, wird dieses Element ausgeschlossen.
this verweist auf das aktuell verarbeitete DOM-Element.

.not() mit einer Funktion – Beispiel

Hier möchten wir alle Absätze formatieren, außer denen, die das Wort 'exclude' enthalten. Die Funktion überprüft den Textinhalt jedes Absatzes.

<!DOCTYPE html>
<html>
<head>
<style>
  .italic { font-style: italic; }
</style>
</head>
<body>
  <p>This is a normal paragraph.</p>
  <p>This paragraph contains 'exclude'.</p>
  <p>Another normal paragraph here.</p>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      $('p').not(function() {
        // Exclude paragraphs containing 'exclude'
        return $(this).text().includes('exclude');
      }).addClass('italic');
    });
  </script>
</body>
</html>

.not() für präzise Auswahlen verketten

Sie können mehrere Aufrufe von .not() verketten oder .not() mit anderen Filtermethoden kombinieren, um sehr präzise Auswahlen zu erstellen.

Jeder Aufruf von .not() verfeinert die aktuelle Elementmenge weiter und entfernt dabei immer mehr Elemente. Stellen Sie sich das als das schrittweise Abtragen von Ebenen nicht benötigter Elemente vor.

Wann Sie .not() verwenden sollten

.not() ist besonders nützlich, wenn:

Sie eine große anfängliche Auswahl haben und einige bestimmte Typen entfernen möchten.
Sie ein Element ausschließen müssen, auf das Sie bereits direkt verweisen können.
Die Formulierung 'alle außer diesen' Ihren Code klarer und lesbarer macht.

So können Sie Ihre Auswahl elegant eingrenzen, ohne vorab komplexe negative Selektoren schreiben zu müssen.

Schnelltest: .not() verwenden

Betrachten Sie das folgende HTML. Welcher jQuery-Code-Ausschnitt wählt alle <p>-Elemente außer demjenigen mit der ID "intro" korrekt aus?

<div>
  <p>Paragraph 1</p>
  <p id="intro">Introduction</p>
  <p>Paragraph 3</p>
</div>

Zusammenfassung: .not() sicher beherrschen

Sie beherrschen nun erfolgreich jQuerys Methode .not()!

Sie haben gelernt, dass .not() entscheidend ist, um Auswahlen zu verfeinern, indem Elemente ausgeschlossen werden anhand von:

einem CSS-Selektor-String (z. B. .not('.hide'))
einem bestimmten DOM-Element oder jQuery-Objekt (z. B. .not(myElement))
einer Funktion für eine benutzerdefinierte, dynamische Ausschlusslogik.

Üben Sie weiter, um Ihre jQuery-Auswahlen noch präziser und effizienter zu gestalten!

Häufig gestellte Fragen

Ist die Lektion „Elemente mit .not() ausschließen“ kostenlos?

Ja — der vollständige Text von „Elemente mit .not() ausschließen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des jQuery Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der jQuery Academy-Kurs umfasst insgesamt 3 Lektionen.

Was lerne ich in „Elemente mit .not() ausschließen“?

Beherrschen Sie die Methode .not(), um bestimmte Elemente präzise aus einer Treffermenge auszuschließen, Ihre Auswahl zu verfeinern und unbeabsichtigte Operationen an bestimmten Elementen zu verhinde… Du übst jQuery Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um jQuery Academy zu starten?

Keine Vorkenntnisse erforderlich. jQuery Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 3.

Wie lange dauert die Lektion „Elemente mit .not() ausschließen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser jQuery Academy-Lektion Code schreiben und ausführen?

Ja. Jede jQuery Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

Benutzerdefinierte Pseudo-Selektoren erstellen
Erweitertes Filtern mit .filter()
Elemente mit .not() ausschließen

← Zurück zu jQuery Academy