Метод each()

Метод each() позволяет перебрать все элементы коллекции без использования циклов. Имеет следующий синтаксис:

each(<Функция обратного вызова>)

В параметре <Функция обратного вызова> указывается ссылка на функцию следующего формата:

function <Название функции>([<Индекс>[, <Элемент DOM>]]) {
   // ...
}

Все параметры являются необязательными. Если в параметре <Индекс> указать переменную, то на каждой итерации в нее будет передаваться текущий индекс элемента в коллекции. Нумерация начинается с нуля. Выведем индекс элемента во всех абзацах:

$('p').each( function(i) {
   this.innerHTML = 'Абзац с индексом ' + i;
});

Текущий элемент доступен внутри функции через указатель this. Обратите внимание, указатель this ссылается на текущий элемент объектной модели документа, а не на элемент коллекции jQuery. По этой причине применять методы jQuery для этого элемента нельзя. В последнем примере для вывода текста внутри абзаца мы использовали свойство innerHTML объекта document, а не метод из библиотеки jQuery. Если необходимо использовать методы из библиотеки jQuery, то предварительно следует найти элемент с помощью функции $(). В качестве примера заменим свойство innerHTML на метод jQuery html():

$('p').each( function(i) {
   $(this).html('Абзац с индексом ' + i);
});

Если в параметре <Элемент DOM> указать переменную, то на каждой итерации в нее будет передаваться ссылка на текущий DOM-элемент. Эту переменную можно использовать вместо указателя this:

$('p').each( function(i, elem) {
   $(elem).html('Абзац с индексом ' + i);
});

Если внутри функции вернуть значение false, то выполнение метода each() будет остановлено. При индексе равном двум, прервем выполнение метода:

$('p').each( function(i) {
   $(this).html('Абзац с индексом ' + i);
   if (i === 2) return false;
});

Во всех этих примерах мы использовали анонимную функцию. Если необходимо вызвать обычную функцию, то ее имя указывается в качестве параметра метода each() без скобок:

function func(i, elem) {
   $(elem).html('Абзац с индексом ' + i);
}
$(function() {
   $('p').each(func);
});

В качестве примера использования метода each() получим URL-адреса всех ссылок в документе (листинг 1.4).

Листинг 1.4. Получение URL-адресов всех ссылок

<!doctype html>
<html lang="ru">
<head>
   <meta charset="utf-8">
   <title>Получение URL-адресов всех ссылок</title>
</head>
<body>
   <a href="link1.html">Ссылка 1</a><br>
   <a href="link2.html">Ссылка 2</a><br>
   <a href="link3.html">Ссылка 3</a><br>
   <p>Все URL-адреса:</p>
   <div id="log"></div>
<script src="js/jquery.min.js"></script>
<script>
$(function() {
   $('a').each( function() {
      $('#log').append($(this).attr('href') + '<br>');
   });
});
</script>
</body>
</html>

После загрузки структуры документа находим коллекцию всех тегов <a> ($('a')). Далее с помощью метода each() перебираем все элементы. В качестве параметра указываем анонимную функцию. На каждой итерации внутри анонимной функции доступен указатель this на текущий элемент коллекции. Находим текущий элемент ($(this)) и с помощью метода attr() получаем значение параметра href (attr('href')). Для вывода результата находим элемент с идентификатором log ($('#log')) и с помощью метода append() добавляем результат в конец к имеющемуся значению элемента.

Учебник по jQuery и AJAX в формате PDF

Помощь сайту

ЮMoney (Yandex-деньги): 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов