Werk met die each-metode in jQuery

Wanneer ons 'n groep elemente het wat verkry is met behulp van jQuery, kan ons slegs veranderinge daarin aanbring vir alle elemente gelyktydig.

Byvoorbeeld, as ons die teks van alle gevinde paragrawe wil verander - sal ons nie in staat wees om dit verskillend te maak nie.

In hierdie geval sal die spesiale metode each ons help, wat dit moontlik maak om 'n sekere funksie op alle elemente van 'n jQuery-stel toe te pas. Binne hierdie funksie sal ons in staat wees om die elemente te skei en anders te handel met elkeen van hulle.

In wese is each 'n lus, waarmee jy al die gevinde elemente kan deurloop. Die verwysing na die element waarop die lus tans loop, sal in this lê.

Ons kan eenvoudig hierdie this gebruik in suiwer JavaScript, soos ons vantevore gedoen het, byvoorbeeld so - this.innerHTML - en die interne inhoud van ons elemente uitskryf. Maar dit is beter om this in jQuery se dollar te verpak so - $(this) - in hierdie geval sal ons al die metodes en jQuery-kettings daarop kan toepas.

Kom ons kyk na die volgende HTML-kode:

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

In hierdie voorbeeld moet ons al die elemente met klas www kry en hul inhoud op die skerm vertoon. Hoe dit gedoen word: met behulp van $('.www') kry ons die elemente wat ons nodig het, dan met behulp van each(test) pas ons die funksie test op elke verkrygde element toe. Dit sal eers op die eerste paragraaf toegepas word, dan op die tweede, op die derde, ensovoorts.

Binne die funksie sal this verwys na die element waarop die funksie test tans toegepas word - eers sal dit die eerste element wees, dan die tweede, ensovoorts. Met so 'n konstruksie $(this) sal ons, in plaas van 'n gewone this van JavaScript, 'n jQuery-element kry en die metode html daarop toepas, wat die teks van ons element sal kry. Wel, dan skryf dit dit net op die skerm:

/*
	Skryf die funksienaam test sonder aanhalingstekens en (),
	aangesien ons die kode daarvan nodig het, nie die resultaat nie:
*/

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

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

Om hierdie taak op te los, kan anonieme funksies ook gebruik word - dit word meer algemeen gedoen:

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

Ons kan ook 'n callback-funksie met parameters aan die each-metode oorhandig.

Kom ons voeg in die volgende voorbeeld aan die einde van alle li op die bladsy hul volgorde-nommer by. Nou sal ons die elementnommer en die element self aan ons anonieme funksie oorhandig:

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

En nou gebruik ons this in plaas van elem:

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

Verander die inhoud van alle li na hul volgorde-nommer.