Метод 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. Получение URL-адресов всех ссылок

<html> <head>
<title>Получение URL-адресов всех ccbmoK</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">Ссылка l</^<br> <a href ="link2 .html">Ссылка 2</^<br> <a href="link3.html">Ссылка 3</^<br> Bee URL-адреса:<br> <div id="div1"x/div> </body> </html>
После загрузки структуры документа находим коллекцию всех тегов <а> ($ ("а")). Далее с помощью метода each () перебираем все элементы. В качестве параметра указываем анонимную функцию. На каждой итерации внутри анонимной функции доступен указатель (this) на текущий элемент коллекции. Находим текущий элемент ($ (this)) и с помощью метода attr() получаем значение параметра href (attr("href")). Для вывода результата находим элемент с идентификатором div1($ ("#div1")) и с помощью метода append() добавляем результат в конец к имеющемуся значению элемента.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *