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

Когато имаме група елементи, получени с помощта на jQuery, можем да внасяме в тях промени само за всички елементи едновременно.

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

В този случай ще ни помогне специален метод each, който позволява прилагането на дадена функция към всички елементи от набор jQuery. Вътре в тази функция ще можем да разделим елементите и да постъпим различно с всеки от тях.

По същество each е цикъл, с помощта на който можем да обходим всички намерени елементи. Връзката към този елемент, по който в момента минава цикълът, ще се намира в this.

Можем просто да използваме този this на чист JavaScript, както сме правили преди, например така - this.innerHTML - и да изведем вътрешното съдържание на нашите елементи. Но е по-добре да увием this в долар jQuery по следния начин - $(this) - в този случай ще можем да прилагаме към него всички методи и вериги от jQuery.

Нека разгледаме следния HTML код:

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, който ще получи текста на нашия елемент. И след това той просто ще се изведе на екрана:

javascript/*
  Името на функцията test пишем без кавички и (),
  тъй като ни трябва нейният код, а не резултат:
*/

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

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

За решаване на тази задача могат да се използват и анонимни функции - това се прави най-често:

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

Също така можем да подадем на метода each callback функция с параметри.

Нека в следващия пример добавим в края на всички li на страницата техния пореден номер. Сега в нашата анонимна функция ще подаваме номера на елемента и самия елемент:

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

А сега вместо elem използваме this:

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