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: redUm 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: cBeispiele für den Einsatz der Methode
Mithilfe von jQuery.each() lassen sich komplexe DOM-Manipulationen durchführen.
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();
});Ähnliche Artikel
Die beliebtesten JavaScript-Frameworks und -Bibliotheken
Wer schon einmal mit JavaScript an einer Webseite gearbeitet hat, weiß um die Komplexität des sogenannten Document Object Models (DOM). Eine einfachere Bedienung versprechen JavaScript-Frameworks und -Bibliotheken: Mit einer Sammlung nützlicher Funktionen und Vereinfachungen greifen sie Entwicklern unter die Arme. Doch welche sind die besten JavaScript-Bibliotheken und -Frameworks? Und worin…
REDPIXEL.PLShutterstock PHP vs. JavaScript: Ein Vergleich der beiden Skriptsprachen
Das Duell PHP vs. JavaScript gibt es bereits seit 1995. Welche Skriptsprache besser ist, hängt vor allem vom jeweiligen Projekt und dessen Anforderungen ab. Hier erfahren Sie, was es mit den beiden Kontrahenten auf sich hat, welche Gemeinsamkeiten und Unterschiede sie aufweisen und ob PHP oder JavaScript das Rennen für sich entscheiden kann.
JavaScript in WordPress einbinden – Wege und Anleitungen
Skripte in JavaScript sind ein praktisches Mittel, um Websites mit interaktiven Inhalten zu füllen. Um Probleme mit schadhaftem Code zu verhindern, sieht WordPress die JavaScript-Einbindung standardmäßig aber nur für Administratoren und Administratorinnen vor. Wir zeigen Ihnen, auf welchen Wegen Sie JavaScript für alle Backend-User freischalten können.
BEST-BACKGROUNDSShutterstock jQuery.addClass() – gezielte Klassenmanipulation für Webseiteneffekte
Die Funktion jQuery.addClass() kann dynamisch Klassen zu HTML-Elementen hinzufügen. Die Methode beeinflusst dadurch die Gestaltung oder das Verhalten Ihrer Webseite. In diesem Artikel stellen wir Ihnen die Syntax und den Anwendungsbereich von jQuery.addClass() vor, damit Sie beeindruckende Effekte auf Ihrer Website erzielen können.
