JQuery Kochbuch Jquery Community Experts

Prev Next

Elemente über die Index-Reihenfolge 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:

<ol>
    <li>Erstes Element</li>
    <li>Zweites Element</li>
    <li>Drittes Element</li>
    <li>Viertes Element</li>
</ol>

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()-Filter eine 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:

<table>
    <tr><td>0</td><td>gerade</td></tr>
    <tr><td>1</td><td>ungerade</td></tr>
    <tr><td>2</td><td>gerade</td></tr>
    <tr><td>3</td><td>ungerade</td></tr>
    <tr><td>4</td><td>gerade</td></tr>
</table>

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.

Prev Next