jQuery-Abfrage - Filter

Kurzform der Suchbereichssuche

Die drei grundlegenden Filtermethoden sind: first(), last() und eq(), die es Ihnen ermöglichen, ein bestimmtes Element basierend auf seiner Position in einer Gruppe von Elementen auszuwählen.

Andere Filtermethoden wie filter() und not() ermöglichen es Ihnen, Elemente auszuwählen, die einem bestimmten Standard entsprechen oder nicht entsprechen.

jQuery first() Methode

Die first()-Methode gibt das erste Element des ausgewählten Elements zurück.

Der folgende Beispielcode wählt das erste <p>-Element im ersten <div>-Element aus:

Beispiel

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

Versuchen Sie es selbst

jQuery last() Methode

Die last()-Methode gibt das letzte Element des ausgewählten Elements zurück.

Der folgende Beispielcode wählt den letzten <p>-Element im letzten <div>-Element aus:

Beispiel

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

Versuchen Sie es selbst

jQuery eq() Methode

Die eq()-Methode gibt das Element zurück, das den angegebenen Index im ausgewählten Element hat.

Die Indizes beginnen bei 0, daher ist der Index des ersten Elements 0 und nicht 1. Der folgende Beispielcode wählt das zweite <p>-Element (Index 1) aus:

Beispiel

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

Versuchen Sie es selbst

jQuery filter() Methode

Die filter()-Methode ermöglicht es Ihnen, einen Standard zu definieren. Elemente, die diesem Standard nicht entsprechen, werden aus der Sammlung entfernt und die übereinstimmenden Elemente werden zurückgegeben.

Der folgende Beispielcode gibt alle <p>-Elemente zurück, die die Klasse "intro" haben:

Beispiel

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

Versuchen Sie es selbst

jQuery not() Methode

Die not()-Methode gibt alle Elemente zurück, die nicht dem Standard entsprechen.

Hinweis:Die not()-Methode ist umgekehrt zu filter().

Der folgende Beispielcode gibt alle <p>-Elemente zurück, die keine Klasse "intro" haben:

Beispiel

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

Versuchen Sie es selbst

jQuery Traversing Referenzhandbuch

Um alle jQuery Traversing Methoden zu erfahren, besuchen Sie bitte unsere jQuery Traversing Referenzhandbuch.