jQuery:n each-metodin käyttö

Kun meillä on ryhmä elementtejä, jotka on saatu jQuery:llä, voimme tehdä niihin muutoksia vain kaikkiin elementteihin yhtä aikaa.

Esimerkiksi, jos haluamme vaihtaa kaikkien löydettyjen kappaleiden tekstiä - emme pysty tekemään siitä erilaista.

Tässä tapauksessa auttaa erityinen each -metodi, joka mahdollistaa funktion soveltamisen kaikkiin jQuery-kokoelman elementteihin. Tällä funktion sisällä pystymme jakamaan elementit ja toimimaan eri tavalla kunkin elementin kanssa.

Pohjimmiltaan each on silmukka, jonka avulla voidaan käydä läpi kaikki löydetyt elementit. Viite siihen elementtiin, jota silmukka parhaillaan käsittelee, löytyy this:sta.

Voimme yksinkertaisesti käyttää tätä this:tä puhdassa JavaScriptissä, kuten teimme aiemmin, esimerkiksi näin - this.innerHTML - ja tulostaa elementtiemme sisällön. Mutta on parempi kääriä this jQuery:n dollariin näin - $(this) - tässä tapauksessa voimme soveltaa siihen kaikkia jQuery:n metodeja ja ketjutuksia.

Katsotaanpa seuraavaa HTML-koodia:

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

Tässä esimerkissä meidän tulee saada kaikki elementit luokalla www ja tulostaa näytölle niiden sisältö. Miten tämä tehdään: käyttämällä $('.www'):tä saamme tarvitsemamme elementit, sitten käyttämällä each(test):tä me sovellamme jokaiseen saatettuun elementtiin funktion test. Se sovelletaan ensin ensimmäiseen kappaleeseen, sitten toiseen, kolmanteen ja niin edelleen.

Funktion sisällä this viittaa siihen elementtiin, johon funktiota test sovelletaan - ensin se on ensimmäinen elementti, sitten toinen, ja niin edelleen. Käyttämällä tällaista rakennetta $(this) saamme tavallisen this:n JavaScriptin sijasta jQuery-elementin ja sovellamme siihen html-metodin, joka saa elementtimme tekstin. Sitten se yksinkertaisesti tulostetaan näytölle:

/*
	Kirjoitamme funktion nimen test ilman lainausmerkkejä ja (),
	koska tarvitsemme sen koodin, emme tulosta:
*/

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

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

Tämän tehtävän ratkaisemiseen voidaan käyttää myös anonyymeja funktioita - niin tehdään useimmiten:

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

Voimme myös antaa each -metodille callback-funktion parametreilla.

Seuraavassa esimerkissä lisätään loppuun kaikille li -elementeille sivulla niiden järjestysnumero. Nyt annamme anonyymiin funktioomme elementin numeron ja itse elementin:

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

Ja nyt elem:n sijasta käytämme this:tä:

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

Vaihda kaikkien li -elementtien sisältö niiden järjestysnumeroksi.