Этот сайт использует cookies. Продолжение работы с сайтом означает, что Вы согласны!
Метод 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()
добавляем результат в конец к имеющемуся значению элемента.
Помощь сайту
ЮMoney (Yandex-деньги): 410011140483022
ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов