Оглавление

3.2. Метод 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)    {

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-адресов всех ссылок

<html>
<head>
<title>Получение URL-адресов всех ссылок</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(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>

 

 

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

 

Ссылка 1
Ссылка 2
Ссылка 3
Все URL-адреса:
link1.html
link2.html
link3.html

<< Меню >>  
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити