Mit der Selektorensyntax können Sie jQuery-Code gezielt auf bestimmte Elemente anwenden. Manchmal genügt das aber nicht. Um etwa in einer Tabelle jede zweite Zeile farblich abzustufen, müssen Sie alle Zeilen der Tabelle der Reihe nach durchgehen (traversieren) und bei jeder zweiten Zeile den Hintergrund ändern.

Beispiel

<table id="Hochrechnen">
<tr><td>1 hoch 2</td><td>1</td></tr>
<tr><td>2 hoch 2</td><td>4</td></tr>
<tr><td>3 hoch 2</td><td>9</td></tr>
<tr><td>4 hoch 2</td><td>16</td></tr>
</table>
<script>
$(document).ready( function() {   
   i = 0;
   $.each($("#Hochrechnen tr"), function() {  
      if(i % 2 == 1)
         $(this).css("background-color", "yellow");
      i += 1;
   } );
} );
</script>

Erläuterung

Das Beispiel zeigt eine kleine HTML-Tabelle mit vier Zeilen. In dem Script unterhalb davon werden diese vier Zeilen durch den Selektor $("#Hochrechnen tr") ausgewählt. Die Auswahl ist eine Liste von jQuery-DOM-Elementobjekten. Zum bequemen Traversieren stellt jQuery die Funktion each() zur Verfügung. Diese bekommt als ersten Parameter eine Liste bzw. einen Array übergeben. Es ist völlig egal, was diese Liste enthält – es kann sich um einen einfachen Array mit Werten handeln, aber auch, wie im obigen Beispiel – um eine Ergebnisliste komplexer DOM-Objekte. Als zweiten Parameter erwartet each() die Angabe einer Funktion, die für jedes Element der Liste aufgerufen werden soll. Im Beispiel wird an dieser Stelle wieder eine anonyme Funktion notiert, eingeleitet durch function().

Innerhalb der Funktion wird mittels einer Modulo-Division (%-Operator in JavaScript) geprüft, ob der aktuelle Wert von i geteilt durch 2 den Rest 1 ergibt. Das ist bei allen ungeraden Werten der Fall. Am Ende wird i um 1 erhöht und hat beim nächsten Aufruf der Funktion durch each() den nächsthöheren Wert. Wenn i ungerade ist, bekommt die aktuell von each() traversierte Tabellenzeile eine gelbe Hintergrundfarbe verpasst. Die dazu angewendete css()-Funktion von jQuery wird im Abschnitt Optik von Elementen auf CSS-Ebene ermitteln und ändern noch näher behandelt. An dieser Stelle geht es um das Syntax-Konstrukt $(this). Es handelt sich um einen Selektor, der im Dokument etwas auswählt, ebenso wie etwa $("#Hochrechnen tr"). Jedoch fehlen die Anführungszeichen. Denn das Schlüsselwort this ist ein Objekt, und zwar das aktuell ausgewählte Element. Welches das jeweils ist, wird durch each() bestimmt.