In diesem kurzen Tutorial erläutern wir, wie Sie mit jQuery.each() durch eine Gruppe von Elementen iterieren und Aktionen ausführen.

Was ist jQuery.each()?

JQuery.each() ist eine Methode aus der Ja­va­Script-Bi­blio­thek jQuery. Sie wird verwendet, um über eine Sammlung von Elementen wie Arrays oder Objekten zu iterieren und bestimmte Aktionen aus­zu­füh­ren. Daher ist .each() sehr nützlich zur Ma­ni­pu­la­ti­on des Document Object Models (DOM), das eine Schnitt­stel­le zwischen HTML und Ja­va­Script bildet. In unserem jQuery-Tutorial erfahren Sie, wie Sie die beliebte Bi­blio­thek einbinden können.

Die Syntax von jQuery.each()

Mit .each() wird jedes Element in einer Sammlung durch­lau­fen und pro Iteration eine Funktion aus­ge­führt. Es gibt zwei Arten von .each(). Die ge­ne­ri­sche Syntax lautet:

$.each(object, callback)

Dabei ist „object“ ein Array oder Objekt und „callback“ die Funktion, die in jedem Durchlauf auf­ge­ru­fen wird. Ihre Parameter bestehen aus dem Index oder dem Schlüssel des Elements und dem Element selbst. Die In­di­zie­rung der Elemente in einem Array beginnt bei der Position 0.

Im folgenden Beispiel werden alle Elemente des Arrays „arr“ durch­lau­fen und in jeder Iteration der Index und der Wert in der Konsole aus­ge­ge­ben.

var arr = ["blue", "yellow", "red"];
$.each(arr, function(index, value) {
    console.log(index + ": " + value);
});

So sieht die Ausgabe aus:

0: blue
1: yellow
2: red

Um DOM-Elemente aus­zu­wäh­len, verwendet man .each() mit jQuery-Se­lek­to­ren:

$(selector).each()

Nach­fol­gend werden alle Lis­ten­ele­men­te der un­ge­ord­ne­ten Liste „alphabet“ se­lek­tiert und ihre Position sowie ihr Inhalt über die Konsole angezeigt. Das Schlüs­sel­wort „this“ bezieht sich hierbei auf das Element.

<ul id="alphabet"></ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>
$("li").each(function(index) {
    console.log( index + ": " + $(this).text() );
});

Dies führt zur Ausgabe:

0: a
1: b
2: c

Beispiele für den Einsatz der Methode

Mithilfe von jQuery.each() lassen sich komplexe DOM-Ma­ni­pu­la­tio­nen durch­füh­ren.

Hinweis

In einigen Si­tua­tio­nen ist eine implizite Iteration anstatt .each() sinnvoll, da manche jQuery-Methoden ebenfalls alle Elemente einer Sammlung durch­lau­fen.

Um allen div-Elementen denselben Klas­sen­na­men hin­zu­zu­fü­gen, kann man die Funktion .addClass() in Kom­bi­na­ti­on mit .each() anwenden:

<div class="header"></div>
<div class="main"></div>
<div class="footer"></div>
$("div").each(function() {
    $(this).addClass("container");
});

Dies liefert folgende Ausgabe:

<div class="header container"></div>
<div class="main container"></div>
<div class="footer container"></div>

Derselbe Code kann durch implizite Iteration gekürzt werden:

$("div").addClass("container");

Besonders hilfreich ist .each() im Kontext von Ja­va­Script-Events. Im folgenden Beispiel wird bei einem Kli­cke­vent die Farbe der div-Elemente ge­wech­selt. Optional kann der Code direkt im Script-Tag des HTML-Dokuments ein­ge­bun­den werden. Anfangs ist die Farbe der Container auf „green“ gesetzt. Bei einem Klick innerhalb des Dokuments wird die Bedingung aus­ge­wer­tet und der Farbwert auf „red“ geändert. Erfolgt ein erneuter Klick, erhält die Ei­gen­schaft „color“ wieder den Stan­dard­wert „green“.

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo</title>
    <style>
    div {
        color: green;
        text-align: center;
        cursor: pointer;
        width: 300px;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<div>Hier klicken</div>
<div>zum Wechseln</div>
<div>der Farbe.</div>
<script>
$(document.body).click(function() {
    $("div").each(function(i) {
        if (this.style.color !== "red") {
            this.style.color = "red";
        } else {
            this.style.color = "";
        }
    });
});
</script>
</body>
</html>

Zudem kann man mit jQuery.each() Übergänge oder Ani­ma­tio­nen rea­li­sie­ren. In diesem Beispiel erhalten die Elemente der Liste „numbers“ bei einem Kli­cke­vent eine blaue Hin­ter­grund­far­be und werden nach einem in­dex­ba­sier­ten Zeit­ab­stand der Reihe nach aus­ge­blen­det.

<ul id="numbers"></ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
$("#numbers").on("click", function(e) {
    $("li").each(function(index) {
        $(this).css("background-color", "blue")
                     .delay(index * 300)
                     .fadeOut(2000);
    });
    e.preventDefault();
});
Zum Hauptmenü