Приднестровская поддержка XOOPS
Метод 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() добавляем результат в конец к имеющемуся значению элемента.
Отправитель | Нити |
---|
13 пользователь(ей) активно (4 пользователь(ей) просматривают Инструкции)
Участников: 0 Гостей: 13 далее... |