jQuery Schnellstart – jQuery Filter

In dieser Lektion lernst Du, wie Du die Auswahl von Elementen mit jQuery filtern kannst.

Filtern der Elementauswahl

jQuery stellt mehrere Methoden wie filter(), first(), last(), eq(), slice(), has(), not() usw. zur Verfügung, mit denen Du die Suche nach Elementen in einem DOM-Baum eingrenzen kannst.

first() Methode

Die first()-Methode filtert die übereinstimmenden Elemente und gibt das erste Element aus der Menge zurück.

Im folgenden Beispiel wird nur das erste <li>-Element innerhalb des <ul>-Elements durch Hinzufügen der Klasse .highlighter  hervorgehoben.

<script>
  $(document).ready(function(){
      $("ul li").first().addClass("highlighter");
  });
</script>

 

last() Methode

Die last()-Methode filtert die übereinstimmenden Elemente und gibt das letzte Element aus der Menge zurück.

Im folgenden Beispiel wird nur das letzte <li>-Element innerhalb des <ul>-Elements durch Hinzufügen der Klasse .highlighter on document ready hervorgehoben.

<script>
$(document).ready(function(){
    $("ul li").last().addClass("highlighter");
});
</script>

 

eq()-Methode

Die eq()-Methode filtert die übereinstimmenden Elemente und gibt nur ein Element mit einer bestimmten Indexnummer zurück.

Im folgenden Beispiel wird das zweite <li>-Element innerhalb des <ul>-Elements durch Hinzufügen der Klasse .highlighter on document ready hervorgehoben.

Hinweis: Der an die eq()-Methode gelieferte Index gibt die 0-basierte Position des Elements an, was bedeutet, dass der Index 0 auf das erste Element zielt, der Index 1 auf das zweite Element und so weiter. Auch dieser Index bezieht sich auf die Position des Elements innerhalb des jQuery-Objekts, nicht innerhalb des DOM-Baums.

<script>
$(document).ready(function(){
    $("ul li").eq(1).addClass("highlighter");
});
</script>

 

filter() Methode

Die filter()-Methode kann den Selektor oder eine Funktion als Argument nehmen, um die Menge der übereinstimmenden Elemente auf der Grundlage eines bestimmten Kriteriums zu filtern.

Der für die filter()-Methode bereitgestellte Selektor oder die Funktion wird gegen jedes Element im Satz der übereinstimmenden Elemente getestet, und alle Elemente, die mit dem bereitgestellten Selektor übereinstimmen oder den Test der Funktion bestehen, werden in das Ergebnis aufgenommen.

<script>
$(document).ready(function(){
    $("ul li").filter(":even").addClass("highlighter");
});
</script>

 

has()-Methode

Die has()-Methode filtert die übereinstimmenden Elemente und gibt nur die Elemente zurück, die das angegebene absteigende Element haben.

Im folgenden Beispiel werden alle <li> Elemente hervorgehoben, die das absteigende <ul> Element haben.

<script>
$(document).ready(function(){
    $("ul li").has("ul").addClass("highlighter");
});
</script>

 

not() Methode

Die jQuery not()-Methode filtert die übereinstimmenden Elemente und gibt alle Elemente zurück, die die angegebenen Bedingungen nicht erfüllen. Sie kann den Selektor oder eine Funktion als Argument verwenden.

Der an die not()-Methode gelieferte Selektor oder die Funktion wird gegen jedes Element in der Menge der übereinstimmenden Elemente getestet, und alle Elemente, die nicht mit dem gelieferten Selektor übereinstimmen oder den Test der Funktion nicht bestehen, werden in das Ergebnis aufgenommen.

<script>
$(document).ready(function(){
    $("ul li").not(":even").addClass("highlighter");
});
</script>

 

slice()-Methode

Die slice()-Methode filtert die übereinstimmenden Elemente, die durch einen Bereich von Indizes angegeben werden. Diese Methode akzeptiert Start- und Endindexnummer (optional) als Argumente.

• Der Startindex gibt die Position an, an der die Elemente mit der Auswahl beginnen.
• Der Endindex gibt die Position an, an der die Elemente aufhören, ausgewählt zu werden.

Im folgenden Beispiel werden das erste und zweite <li>-Element innerhalb des <ul>-Elements durch Hinzufügen der Klasse .highlight on document ready hervorgehoben.

<script>
$(document).ready(function(){
    $("ul li").slice(0, 2).addClass("highlighter");
});
</script>

 

Fazit

In dieser Lektion hast Du gelernt, wie Du die Auswahl von Elementen mit jQuery filtern kannst. Du benutzt dafür mehrere Methoden wie filter(), first(), last(), eq(), slice(), has() sowie not(). Mit diesen Methoden kannst du die Suche nach Elementen in einem DOM-Baum eingrenzen.

In der nächsten Lektion beschäftigen wir uns mit AJAX und wie es in jQuery funktioniert, um Inhalt blitzschnell zu laden.