A each metódus használata jQuery-ben

Amikor egy csoport elemeink van, amelyeket jQuery-vel kaptunk, csak az összes elemre egyszerre tudunk változtatásokat végrehajtani.

Például, ha meg akarjuk változtatni az összes talált bekezdés szövegét - nem lesz lehetőségünk különbözővé tenni azt.

Ebben az esetben segítségünkre lehet a speciális each metódus, amely lehetővé teszi egy adott függvény alkalmazását a jQuery halmaz összes elemére. Ezen függvényen belül képesek leszünk elkülöníteni az elemeket, és másképp kezelni mindegyiket.

Lényegében a each egy ciklus, amelynek segítségével végig lehet iterálni az összes talált elemen. Azon elemre mutató hivatkozás, amelyen éppen a ciklus fut, a this-ben lesz.

Egyszerűen használhatjuk ezt a this-t tiszta JavaScriptben, ahogy azt korábban tettük, például így - this.innerHTML - és kiírhatjuk elemeink belső tartalmát. De jobb, ha becsomagoljuk a this-t jQuery dollárba, így - $(this) - ebben az esetben alkalmazhatunk rá minden jQuery metódust és láncolatot.

Nézzük a következő HTML kódot:

html<p class="www">szöveg</p>
<p class="www">szöveg</p>
<p class="www">szöveg</p>
<p>szöveg</p>

Ebben a példában meg kell kapnunk az összes www osztállyal rendelkező elemet és ki kell írnunk a képernyőre a tartalmukat. Hogyan történik: a $('.www') segítségével megkapjuk a szükséges elemeket, majd a each(test) segítségével minden megkapott elemre alkalmazzuk a test függvényt. Először az első bekezdésre alkalmazza, majd a másodikra, a harmadikra, és így tovább.

A függvényen belül a this arra az elemre fog mutatni, amelyre a függvényt alkalmazzuk - először ez az első elem lesz, majd a második, és így tovább. Egy ilyen konstrukcióval $(this) a szokásos this helyett jQuery elemet kapunk és rá alkalmazzuk a html metódust, amely megkapja elemünk szövegét. Ezután egyszerűen kiírja a képernyőre:

javascript/*
  A test függvény nevét idézőjelek és () nélkül írjuk,
  mivel a kódjára van szükségünk, nem az eredményére:
*/

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

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

A feladat megoldásához használhatunk név nélküli függvényeket is - ezt szokták leggyakrabban:

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

Továbbá átadhatjuk a each metódusnak a callback függvényt paraméterekkel.

A következő példában adjuk hozzá a végéhez minden oldalon lévő li elemnek a sorszámát. Most a név nélküli függvényünkbe átadjuk az elem sorszámát és magát az elemet:

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

Most pedig a elem helyett használjuk a this-t:

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