Práce s metodou each v jQuery

Když máme skupinu prvků získaných pomocí jQuery, můžeme do nich provádět změny pouze pro všechny prvky současně.

Například, pokud chceme změnit text všech našich odstavců - nepodaří se nám jej udělat rozdílným.

V tomto případě nám pomůže speciální metoda each, která umožňuje aplikovat nějakou funkci na všechny prvky sady jQuery. Přitom uvnitř této funkce budeme moci prvky rozdělit a zacházet s každým z nich jinak.

V podstatě each je cyklus, pomocí kterého můžeme projít všechny nalezené prvky. Odkaz na ten prvek, po kterém právě prochází cyklus, bude ležet v this.

Můžeme jednoduše použít tento this v čistém JavaScriptu, jak jsme to dělali dříve, například takto - this.innerHTML - a vypsat vnitřní obsah našich prvků. Ale je lepší obalit this do dolaru jQuery tímto způsobem - $(this) - v tomto případě na něj budeme moci aplikovat všechny metody a řetězce jQuery.

Podívejme se na následující HTML kód:

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

V tomto příkladu musíme získat všechny prvky s třídou www a zobrazit na obrazovce jejich obsah. Jak se to dělá: pomocí $('.www') získáme potřebné prvky, poté pomocí each(test) aplikujeme na každý získaný prvek funkci test. Nejprve se aplikuje na první odstavec, poté na druhý, na třetí a tak dále.

Uvnitř funkce this bude ukazovat na ten prvek, na který se funkce test aplikuje - nejprve to bude první prvek, poté druhý, a tak dále. Pomocí takové konstrukce $(this) místo obyčejného this od JavaScriptu získáme prvek jQuery a aplikujeme na něj metodu html, který získá text našeho prvku. No, a poté se jednoduše vypíše na obrazovku:

javascript/*
  Název funkce test píšeme bez uvozovek a (),
  protože potřebujeme její kód, ne výsledek:
*/

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

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

Pro řešení této úlohy lze použít i anonymní funkce - to se dělá nejčastěji:

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

Také můžeme předat metodě each callback-funkci s parametry.

Pojďme v následujícím příkladu přidat na konec všem li na stránce jejich pořadové číslo. Nyní do naší anonymní funkce budeme předávat číslo prvku a samotný prvek:

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

A nyní místo elem použijeme this:

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