[Function] each(callback)
Раздел "Miscellaneous"
Выполняет функцию в контексте каждого найденного элемента.
callback:Функция выполняется для каждого выбранного элемента. Функция может принимать один необязательный аргумент - индекс элемента (смотрите первый пример ниже). Однако, внутри функции Вы можете ссылаться на текущий элемент через ключевое слово this.
function callback(index, domElement)
{
this; // текуший элемент domElement
index; // индекс элемента
}
Данный метод является циклом, обходящим каждый элемент. Функция обратного вызова выполняется каждый раз для определенного элемента стуркутуры DOM (один раз для каждого выбранного элемента), к которому применяется метод each. После выполнения функция передаёт один аргумент, указывающий позицию элемента в виде целого числа, основанного на нулевом индексе). Функция возвращает 'false' изнутри каждой функции, полностью заверщей соединенную последовательнось всех элементов(подобно использованию «break» при нормальном выполнении функции). Возвращает 'true' с каждым переходом к следующей итерации (подобно использованию 'continue' при условии нормального выполнения функции).
Предположим, что у нас имеется список:
<ul>
<li>Первый элемент списка</li>
<li>Второй элемент списка</li>
</ul>
тогда для того, чтобы обойти каждый элемент списка нужен следующий jQuery:
$('li').each(function(index) {
alert(index + ': ' + $(this).text());
});
в результате будет вывдено сообщение:
0: foo
1: bar
Если указать внутри функции false, то цикл будет остановлен.
Пример:
Повторение одной и той же функции для каждого элемента div, устанавливающей определенный цвет.
"jQuery"
$(document.body).click(function () {
$("div").each(function (i) {
if (this.style.color != "blue") {
this.style.color = "blue";
} else {
this.style.color = "";
}
});
});
"HTML"
<div>Нажмите</div>
<div>чтобы повторить</div>
<div>функцию</div>
"CSS"
div { color:red; text-align:center; cursor:pointer;
font-weight:bolder; width:300px; }
"Живой пример jQuery"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://test-drupal.ru/themes/slyweb/css/jqueryiframe.css"
rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(document.body).click(function () {
$("div").each(function (i) {
if (this.style.color != "blue") {
this.style.color = "blue";
} else {
this.style.color = "";
}
});
});
});
</script>
</head>
<body class="iframe">
<div>Нажмите</div>
<div>чтобы повторить</div>
<div>функцию</div>
</body>
</html>
<style>
div { color:red; text-align:center; cursor:pointer;
font-weight:bolder; width:300px; }
</style>
Пример:
Если вам необходимо использовать jQuery объект взамен обычного элемента DOM, используйте функцию $(this):
"jQuery"
$("button").click(function () {
$("li").each(function(){
$(this).toggleClass("example");
});
});
"HTML"
<button>Изменить цвет</button>
<span></span>
<ul>
<li>Eat</li>
<li>Sleep</li>
<li>Be merry</li>
</ul>
"CSS"
ul { font-size:18px; margin:0; }
span { color:blue; text-decoration:underline; cursor:pointer; }
.example { font-style:italic; }
"Живой пример jQuery"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://test-drupal.ru/themes/slyweb/css/jqueryiframe.css"
rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function () {
$("li").each(function(){
$(this).toggleClass("example");
});
});
});
</script>
</head>
<body class="iframe">
<button>Изменить цвет</button>
<span></span>
<ul>
<li>Eat</li>
<li>Sleep</li>
<li>Be merry</li>
</ul>
</body>
</html>
<style>
ul { font-size:18px; margin:0; }
span { color:blue; text-decoration:underline; cursor:pointer; }
.example { font-style:italic; }
</style>
Пример:
Вы можете использовать 'return' для прекращения цикла.
"jQuery"
$("button").click(function () {
$("div").each(function (index, domEle) {
// domEle == this
$(domEle).css("backgroundColor", "yellow");
if ($(this).is("#stop")) {
$("span").text("div #" + index);
return false;
}
});
});
"HTML"
<button>Изменить цвет</button>
<span></span>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="stop">Стоп</div>
<div></div>
<div></div>
<div></div>
"CSS"
div { width:40px; height:40px; margin:5px; float:left;
border:2px blue solid; text-align:center; }
span { color:red; }
button
"Живой пример jQuery"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://test-drupal.ru/themes/slyweb/css/jqueryiframe.css"
rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function () {
$("div").each(function (index, domEle) {
// domEle == this
$(domEle).css("backgroundColor", "yellow");
if ($(this).is("#stop")) {
$("span").text("div #" + index);
return false;
}
});
});
});
</script>
</head>
<body class="iframe">
<button>Изменить цвет</button>
<span></span>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="stop">Стоп</div>
<div></div>
<div></div>
<div></div>
</body>
</html>
<style>
div { width:40px; height:40px; margin:5px; float:left;
border:2px blue solid; text-align:center; }
span { color:red; }
button
</style>
Пример:
Пример с официальной страницы руководства jQuery, в котром создается атрибут src с адресом изображения, основанным на слове test и индексе изображения.
"jQuery"
$("img").each(function (i) {
this.src = "images/ptica" + i + ".gif";
});
"HTML"
<img></img>
<img></img>
"Живой пример jQuery"
Версия jQuery 1.4.2
Документ создан 2010-08-21
