Описание: Перебирает объекты jQuery, выполняя функцию для каждого соответствующего элемента.
Аргументы
.each( function(индекс, Элемент) )
Добавлена в версию: 1.0
function(индекс, Элемент)
Функция для выполнения для каждого соответствующего элемента.
Метод .each() разработан, чтобы сделать
конструкцию циклов DOM короткой и менее подверженной ошибкам.
При вызове она перебирает элементы DOM, которые являются частью объекта jQuery.
Каждый раз, когда выполняется вызов, он проходит текущую итерацию цикла, начиная с 0.
Еще важнее то, что вызов производится в контексте текущего элемента DOM,
так что ключевое слово this относится к элементу.
Предположим, что мы имеем простой ненумерованный список на странице:
<ul>
<li>foo</li>
<li>bar</li>
</ul>
Мы можем выбрать список пунктов и провести итерацию по ним:
$('li').each(function(index) {
alert(index + ': ' + $(this).text());
});
Будут выдаваться сообщения по каждому пункту в списке:
0: foo
1: bar
Мы можем остановить цикл внутри функции обратного вызова, вернув false.
Примеры
Пример 1
Перебирает три объекта div и устанавливает их свойства цвета.$(document.body).click(function () { $("div").each(function (i) { if (this.style.color != "blue") { this.style.color = "blue"; } else { this.style.color = ""; } }); });
Пример 1 - Полный код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
div { color:red; text-align:center; cursor:pointer;
font-weight:bolder; width:300px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(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>
<div>Click here</div>
<div>to iterate through</div>
<div>these divs.</div>
</body>
</html>
Пример 2
Если вы хотите иметь объект jQuery вместо обычных элементов DOM, используйте функцию $(this), например:
$("span").click(function () {
$("li").each(function(){
$(this).toggleClass("example");
});
});
Пример 2 - Полный код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
ul { font-size:18px; margin:0; }
span { color:blue; text-decoration:underline; cursor:pointer; }
.example { font-style:italic; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("span").click(function () {
$("li").each(function(){
$(this).toggleClass("example");
});
});
});
</script>
</head>
<body>
To do list: <span>(click here to change)</span>
<ul>
<li>Eat</li>
<li>Sleep</li>
<li>Be merry</li>
</ul>
</body>
</html>
Пример 3
Вы можете использовать "return", чтобы выйти из цикла each() раньше.Пример 3 - Полный код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
div { width:40px; height:40px; margin:5px; float:left;
border:2px blue solid; text-align:center; }
span { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("button").click(function () {
$("div").each(function (index, domEle) {
// domEle == this
$(domEle).css("backgroundColor", "yellow");
if ($(this).is("#stop")) {
$("span").text("Stopped at div index #" + index);
return false;
}
});
});
});
</script>
</head>
<body>
<button>Change colors</button>
<span></span>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="stop">Stop here</div>
<div></div>
<div></div>
<div></div>
</body>
</html>
Была ли эта информация полезной?
