JQuery Kochbuch (German Edition)

selektieren
    Problem
    Sie wollen Elemente basierend auf ihre Reihenfolge selektieren.
    Lösung
    Abhängig davon, was Sie tun wollen, stehen Ihnen die folgenden Filter zur Verfügung. Sie sehen vielleicht wie CSS-Pseudoklassen aus,aber in jQuery heißen sie Filter :
    :first
Passt auf das erste selektierte Element
    :last
Passt auf das letzte selektierte Element
    :even
Passt auf jedes gerade Element (der Index beginnt bei Null)
    :odd
Passt auf jedes ungerade Element (der Index beginnt bei Null)
    :eq(
n
)
Passt auf ein einzelnes Element mit dem Index ( n )
    :lt(
n
)
Passt auf alle Elemente mit einem Index kleiner n
    :gt(
n
)
Passt auf alle Elemente mit einem Index größer n
    Nutzen wir das folgende HTML-Markup:

    
1. Erstes Element

    
2. Zweites Element

    
3. Drittes Element

    
4. Viertes Element

    Das erste Element könnten wir nun auf vielen verschiedenen Wegen selektieren:
jQuery('ol li:first');
jQuery('ol li:eq(0)');
jQuery('ol li:lt(1)');
    Beachten Sie, dass sowohl der
eq()
-wie auch der
lt()
-Filtereine Zahl erwarten. Der Index beginnt mit 0, daher ist das erste Element über 0 zu erreichen, das zweite über 1 und so weiter.
    Häufig will man für Tabellenzeilen abwechselnde Stile nutzen. Das kann man mit den Filtern
:even
und
:odd
erreichen:

    
    
    
    
    

0	gerade
1	ungerade
2	gerade
3	ungerade
4	gerade

    Sie können nun abhängig vom Index jeder Tabellenzeile unterschiedliche Klassen zuweisen:
jQuery('tr:even').addClass('even');
    Dabei müssen Sie natürlich die entsprechende Klasse (
even
) in Ihrem CSS Stylesheet definieren:
table tr.even {
    background: #CCC;
}
    Damit erhält man den in Figure 2-1 gezeigten Effekt.
    Figure 2-1. Tabelle mit dunkleren »geraden« Zeilen
    Diskussion
    Wie schon erwähnt beginnt der Index von Elementen mit der Null, so dass das erste Element den Index 0 besitzt. Abgesehen davon ist die Nutzung der beschriebenen Filter sehr einfach. Es sollte auch noch erwähnt werden, dass diese Filter eine Collection benötigen, mit der sie arbeiten können, denn der Index kann nur ermittelt werden, wenn es eine initiale Collection gibt. Dieser Selektor wird daher nicht funktionieren:
jQuery(':even');
    ----
    Warning
    Tatsächlich funktioniert dieser Selektor, aber nur, weil jQuery im Hintergrund noch korrigierend eingreift. Wird keine initiale Collection angegeben, geht jQuery davon aus, dass Sie alle Elemente im Dokument meinen. Der Selektor funktioniert also, indem er auf
jQuery('*:even')
abgebildet wird.
    ----
    Auf der linken Seite des Filters ist eine initiale Collection notwendig, also etwas, auf das der Filter angewendet werden kann. Die Collection kann sich dabei in einem schon instanzierten jQuery-Objekt befinden, wie zum Beispiel hier:
jQuery('ul li').filter(':first');
    Die Filter-Methode wird hier auf einem schon instanzierten jQuery-Objekte (mit den List-Elementen) ausgeführt.

Aktuell animierte Elemente selektieren
    Problem
    Sie müssen Elemente basierend auf dem Animations-Status selektieren.
    Lösung
    jQuery stellt einen praktischen Filter für diesen speziellen Zweck zur Verfügung. Der Filter
:animated
passt nurauf Elemente, die aktuell animiert sind:
jQuery('div:animated');
    Dieser Selektor findet alle