Метод each()

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

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

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

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

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

$("div").each(function(i) {
   this.innerHTML = "DIV с индексом " + i;
});

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

$("div").each(function(i) {
   $(this).html("DIV с индексом " + i);
});

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

$("div").each(function(i, d) {
   $(d).html("DIV с индексом " + i);
});

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

$("div").each(function(i) {
   $(this).html("DIV с индексом " + i);
   if (i == 2) {
      return false;
   }
});

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

function myFunc(i, d) {
   $(d).html("DIV с индексом " + i);
   if (i == 2) {
      return false;
   }
}
$(document).ready(function() {
   $("div").each(myFunc);
});

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

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

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

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

Предыдущая статья Все статьи Следующая статья