jQuery.each-Tutorial: So verwenden Sie die Code-Iteration

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 JavaScript-Bibliothek jQuery. Sie wird verwendet, um über eine Sammlung von Elementen wie Arrays oder Objekten zu iterieren und bestimmte Aktionen auszuführen. Daher ist .each() sehr nützlich zur Manipulation des Document Object Models (DOM), das eine Schnittstelle zwischen HTML und JavaScript bildet. In unserem jQuery-Tutorial erfahren Sie, wie Sie die beliebte Bibliothek einbinden können.

Die Syntax von jQuery.each()

Mit .each() wird jedes Element in einer Sammlung durchlaufen und pro Iteration eine Funktion ausgeführt. Es gibt zwei Arten von .each(). Die generische Syntax lautet:

$.each(object, callback)

Dabei ist „object“ ein Array oder Objekt und „callback“ die Funktion, die in jedem Durchlauf aufgerufen wird. Ihre Parameter bestehen aus dem Index oder dem Schlüssel des Elements und dem Element selbst. Die Indizierung der Elemente in einem Array beginnt bei der Position 0.

Im folgenden Beispiel werden alle Elemente des Arrays „arr“ durchlaufen und in jeder Iteration der Index und der Wert in der Konsole ausgegeben.

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 auszuwählen, verwendet man .each() mit jQuery-Selektoren:

$(selector).each()

Nachfolgend werden alle Listenelemente der ungeordneten Liste „alphabet“ selektiert und ihre Position sowie ihr Inhalt über die Konsole angezeigt. Das Schlüsselwort „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-Manipulationen durchführen.

Hinweis

In einigen Situationen ist eine implizite Iteration anstatt .each() sinnvoll, da manche jQuery-Methoden ebenfalls alle Elemente einer Sammlung durchlaufen.

Um allen div-Elementen denselben Klassennamen hinzuzufügen, kann man die Funktion .addClass() in Kombination 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 JavaScript-Events. Im folgenden Beispiel wird bei einem Klickevent die Farbe der div-Elemente gewechselt. Optional kann der Code direkt im Script-Tag des HTML-Dokuments eingebunden werden. Anfangs ist die Farbe der Container auf „green“ gesetzt. Bei einem Klick innerhalb des Dokuments wird die Bedingung ausgewertet und der Farbwert auf „red“ geändert. Erfolgt ein erneuter Klick, erhält die Eigenschaft „color“ wieder den Standardwert „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 Animationen realisieren. In diesem Beispiel erhalten die Elemente der Liste „numbers“ bei einem Klickevent eine blaue Hintergrundfarbe und werden nach einem indexbasierten Zeitabstand der Reihe nach ausgeblendet.

<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();
});
War dieser Artikel hilfreich?