Рад са методом each у jQuery

Када имамо групу елемената, добијених помоћу jQuery-а, можемо уносити у њих промене само за све елементе истовремено.

На пример, ако желимо да променимо текст свих пронађених параграфа - нећемо моћи да га учинимо различитим.

У том случају ће нам помоћи специјални метод each, који омогућава да применимо неку функцију за све елементе jQuery скупа. При томе унутар те функције ћемо моћи да раздвојимо елементе и поступимо различито са сваким од њих.

У суштини each је циклус, помоћу којег можемо прећи преко свих пронађених елемената. Референца на тај елемент, по којем тренутно пролази циклус ће бити у this.

Можемо једноставно искористити овај this у чистom JavaScript-у, као што смо раније радили, на пример, овако - this.innerHTML - и приказати унутрашњи садржај наших елемената. Али боље је умотати this у jQuery долар овако - $(this) - у том случају ћемо моћи да на њега применимо све jQuery методе и ланац.

Хајде да погледамо следећи HTML код:

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

У овом примеру морамо да добијемо све елементе са класом www и прикажемо на екрану њихов садржај. Како се то ради: помоћу $('.www') добијамо елементе који су нам потребни, затим помоћу each(test) на сваки добијени елемент примењујемо функцију test. Она ће се прво применити на први пасус, затим на други, на трећи и тако даље.

Унутар функције this ће указивати на онај елемент, на који се примењује функција test - прво ће то бити први елемент, затим други, и тако даље. Помоћу такве конструкције $(this) ми уместо обичног this из JavaScript-а добијамо jQuery елемент и примењујемо на њега метод html, који ће добити текст нашег елемента. Затим ће се он једноставно приказати на екрану:

/*
	Име функције test пишемо без наводника и (),
	јер нам је потребан њен код, а не резултат:
*/

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

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

За решавање овог задатка можемо користити и анонимне функције - тако се најчешће ради:

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

Такође можемо проследити методу each callback функцију са параметрима.

Хајде да у следећем примеру додамо на крај свим li на страници њихов редни број. Сада ћемо у нашу анонимну функцију проследити број елемента и сам елемент:

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

А сада уместо elem искористимо this:

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

Промените садржај свих li на њихов редни број.