Werken met de each-methode in jQuery

Wanneer we een groep elementen hebben verkregen met jQuery, kunnen we er alleen wijzigingen in aanbrengen voor alle elementen tegelijk.

Als we bijvoorbeeld de tekst van alle gevonden alinea's willen wijzigen - zullen we het niet kunnen maken om deze verschillend te maken.

In dit geval helpt de speciale methode each, die het mogelijk maakt om een functie toe te passen op alle elementen van een jQuery-set. Binnen deze functie kunnen we de elementen onderscheiden en verschillend handelen met elk ervan.

In essentie is each een lus, waarmee je alle gevonden elementen kunt doorlopen. Een verwijzing naar het element dat momenteel wordt doorlopen zal in this liggen.

We kunnen simpelweg deze this gebruiken in pure JavaScript, zoals we eerder deden, bijvoorbeeld zo - this.innerHTML - en de interne inhoud van onze elementen uitvoeren. Maar het is beter om this in een jQuery-dollar te wrappen op deze manier - $(this) - in dit geval kunnen we er alle jQuery-methoden en -ketens op toepassen.

Laten we de volgende HTML-code bekijken:

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

In dit voorbeeld moeten we alle elementen met de klasse www verkrijgen en hun inhoud op het scherm tonen. Hoe het wordt gedaan: met $('.www') krijgen we de elementen die we nodig hebben, vervolgens passen we met each(test) de functie test toe op elk verkregen element. Eerst wordt deze toegepast op de eerste alinea, dan op de tweede, op de derde, enzovoort.

Binnen de functie zal this verwijzen naar het element waarop de functie test wordt toegepast - eerst is dit het eerste element, dan het tweede, enzovoort. Met een dergelijke constructie $(this) krijgen we, in plaats van een gewone this van JavaScript, een jQuery-element en passen we er de methode html op toe, die de tekst van ons element zal ophalen. Vervolgens wordt deze simpelweg op het scherm getoond:

/*
	We schrijven de functienaam test zonder aanhalingstekens en (),
	omdat we de code nodig hebben, en niet het resultaat:
*/

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

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

Voor het oplossen van deze taak kunnen ook anonieme functies worden gebruikt - dit wordt het vaakst gedaan:

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

We kunnen ook een callback-functie met parameters doorgeven aan de each methode.

Laten we in het volgende voorbeeld aan het einde van alle li op de pagina hun volgnummer toevoegen. Nu zullen we het volgnummer van het element en het element zelf doorgeven aan onze anonieme functie:

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

En laten we nu this gebruiken in plaats van elem:

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

Verander de inhoud van alle li in hun volgnummer.