Meetodi each kasutamine jQuery-s

Kui meil on elementide rühm, mis on saadud jQuery abil, saame neisse teha muudatusi ainult kõikide elementide jaoks korraga.

Näiteks kui soovime muuta kõikide leitud lõikude teksti - meil ei õnnestu teha seda erinevaks.

Sellisel juhul aitab meid spetsiaalne meetod each, mis võimaldab rakendada mõnda funktsiooni kõikidele jQuery kogumi elementidele. Selle funktsiooni sees saame elemente eristada ja käituda igaühega erinevalt.

Põhimõtteliselt on each tsükkel, mille abil saab läbi käia kõik leitud elemendid. Viide sellele elemendile, mille peal tsükkel hetkel käib, asub this-is.

Me võime lihtsalt kasutada seda this-i puhas JavaScriptis, nagu me seda varem tegime, näiteks nii - this.innerHTML - ja väljastada meie elementide sisu. Kuid parem on mässida this dollarimärki jQuery-sse sel viisil - $(this) - sel juhul saame sellele rakendada kõiki jQuery meetodeid ja ahelaid.

Vaatame järgmist HTML koodi:

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

Selles näites peame saama kõik elemendid klassiga www ja väljastama ekraanile nende sisu. Kuidas seda tehakse: abiga $('.www') saame vajalikud elemendid, seejärel abiga each(test) rakendame iga saadud elemendi peale funktsiooni test. See rakendub kõigepealt esimesele lõigule, siis teisele, kolmandale ja nii edasi.

Funktsiooni sees viitab this sellele elemendile, millele funktsiooni test rakendatakse - alguses on see esimene element, siis teine, ja nii edasi. Sellise konstruktsiooni abil $(this) saame tavalise this asemel JavaScriptist jQuery elemendi ja rakendame sellele meetodi html, mis saab meie elemendi teksti. Noh, ja siis see lihtsalt väljastatakse ekraanile:

/*
	Funktsiooni nime test kirjutame ilma jutumärkideta ja (),
	kuna me vajame selle koodi, mitte tulemust:
*/

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

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

Selle ülesande lahendamiseks võib kasutada ka anonüümseid funktsioone - seda tehakse kõige sagedamini:

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

Samuti saame meetodile each edastada callback-funktsiooni parameetritega.

Järgmises näites lisame lõppu kõikidele lehel olevatele li-dele nende järjekorranumbri. Nüüd edastame oma anonüümsele funktsioonile elemendi numbri ja elemendi enda:

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

Ja nüüd kasutame elem asemel this-i:

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

Muutke kõikide lide sisu nende järjekorranumbriks.