jQuery Traversing - Filtern


Die Methoden first(), last(), eq(), filter() und not()

Die grundlegendsten Filtermethoden sind first(), last()und eq(), mit denen Sie ein bestimmtes Element basierend auf seiner Position in einer Gruppe von Elementen auswählen können.

Andere Filtermethoden mögen filter()und not()ermöglichen es Ihnen, Elemente auszuwählen, die bestimmten Kriterien entsprechen oder nicht entsprechen.


jQuery first() Methode

Die first()Methode gibt das erste Element der angegebenen Elemente zurück.

Das folgende Beispiel wählt das erste <div> Element aus:

Beispiel

$(document).ready(function(){
  $("div").first();
});

jQuery last() Methode

Die last()Methode gibt das letzte Element der angegebenen Elemente zurück.

Das folgende Beispiel wählt das letzte <div> Element aus:

Beispiel

$(document).ready(function(){
  $("div").last();
});


jQuery eq()-Methode

Die eq()Methode gibt ein Element mit einer bestimmten Indexnummer der ausgewählten Elemente zurück.

Die Indexnummern beginnen bei 0, sodass das erste Element die Indexnummer 0 und nicht 1 hat. Das folgende Beispiel wählt das zweite <p>Element (Indexnummer 1) aus:

Beispiel

$(document).ready(function(){
  $("p").eq(1);
});

jQuery filter() Methode

Mit der filter()Methode können Sie ein Kriterium angeben. Elemente, die den Kriterien nicht entsprechen, werden aus der Auswahl entfernt, und diejenigen, die übereinstimmen, werden zurückgegeben.

Das folgende Beispiel gibt alle <p>Elemente mit dem Klassennamen „intro“ zurück:

Beispiel

$(document).ready(function(){
  $("p").filter(".intro");
});

jQuery not() Methode

Die not()Methode gibt alle Elemente zurück, die den Kriterien nicht entsprechen.

Tipp: Die not()Methode ist das Gegenteil von filter().

Das folgende Beispiel gibt alle <p>Elemente zurück, die nicht den Klassennamen "intro" haben:

Beispiel

$(document).ready(function(){
  $("p").not(".intro");
});

jQuery-Übungen

Testen Sie sich mit Übungen

Übung:

Verwenden Sie eine jQuery-Methode, um das erste <div>-Element im Dokument abzurufen.

$("div").();


jQuery Traversing-Referenz

Eine vollständige Übersicht aller jQuery-Traversing-Methoden finden Sie in unserer jQuery-Traversing-Referenz .