Работа со методот each во jQuery

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

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

Во овој случај ќе ни помогне специјалниот метод each, кој овозможува да се примени која било функција за сите елементи на множеството jQuery. Притоа внатре во оваа функција ќе можеме да ги разделиме елементите и да постапиме различно со секој од нив.

Во суштина each е циклус, со чија помош може да се пребараат сите пронајдени елементи. Врската кон тој елемент, по кој моментално поминува циклусот ќе лежи во this.

Можеме едноставно да го искористиме овој this во чист 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 со нивниот редоследен број.