Arbeit mit der each-Methode in jQuery

Wenn wir eine Gruppe von Elementen haben, die mit jQuery abgerufen wurden, können wir Änderungen nur für alle Elemente gleichzeitig vornehmen.

Wenn wir beispielsweise den Text aller gefundenen Absätze ändern möchten, können wir ihn nicht unterschiedlich gestalten.

In diesem Fall hilft uns die spezielle Methode each, die es erlaubt, eine bestimmte Funktion auf alle Elemente eines jQuery-Sets anzuwenden. Innerhalb dieser Funktion können wir die Elemente unterscheiden und mit jedem von ihnen unterschiedlich verfahren.

Im Wesentlichen ist each eine Schleife, mit der alle gefundenen Elemente durchlaufen werden können. Der Verweis auf das Element, das gerade von der Schleife verarbeitet wird, befindet sich in this.

Wir können dieses this einfach in purem JavaScript verwenden, wie wir es früher getan haben, zum Beispiel so - this.innerHTML - und den inneren Inhalt unserer Elemente ausgeben. Aber es ist besser, this in jQuery-Dollar einzuhüllen, auf diese Weise - $(this) - in diesem Fall können wir alle jQuery-Methoden und -Verkettungen darauf anwenden.

Betrachten wir den folgenden HTML-Code:

<p class="www">text</p>
<p class="www">text</p>
<p class="www">text</p>
<p>text</p>

In diesem Beispiel müssen wir alle Elemente mit der Klasse www abrufen und ihren Inhalt auf dem Bildschirm ausgeben. So wird es gemacht: Mit $('.www') erhalten wir die gewünschten Elemente, dann wenden wir mit each(test) die Funktion test auf jedes erhaltene Element an. Zuerst wird sie auf den ersten Absatz angewendet, dann auf den zweiten, den dritten und so weiter.

Innerhalb der Funktion zeigt this auf das Element, auf das die Funktion test angewendet wird - zuerst ist es das erste Element, dann das zweite, und so weiter. Mit einer solchen Konstruktion $(this) erhalten wir anstelle eines normalen this von JavaScript ein jQuery-Element und wenden darauf die Methode html an, die den Text unseres Elements erhält. Nun, danach wird er einfach auf dem Bildschirm ausgegeben:

/*
	Den Funktionsnamen test schreiben wir ohne Anführungszeichen und (),
	da wir ihren Code benötigen, nicht das Ergebnis:
*/

$('.www').each(test);

function test() {
	alert($(this).html());
}

Um diese Aufgabe zu lösen, können auch anonyme Funktionen verwendet werden - das wird am häufigsten gemacht:

$('.www').each(function() {
	alert($(this).html());
});

Wir können der each-Methode auch eine Callback-Funktion mit Parametern übergeben.

Lassen Sie uns im nächsten Beispiel am Ende aller li auf der Seite ihre Ordnungsnummer hinzufügen. Nun werden wir in unsere anonyme Funktion die Nummer des Elements und das Element selbst übergeben:

$('li').each(function (index, elem) {
	$(elem).append(index);
});

Und jetzt verwenden wir anstelle von elem this:

$('li').each(function (index) {
	$(this).append(index);
});

Ändern Sie den Inhalt aller li auf ihre Ordnungsnummer.