jQuery each(callback)

Slyweb

На разработку сайта! Скидки 50%!

Поиск функций jQuery

Характеристика функции

[Function] each(callback)

Раздел "Miscellaneous"

Выполняет функцию в контексте каждого найденного элемента.

Параметры

each(callback)

1.0

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, то цикл будет остановлен.

Возможно, Вам будет интересно прочитать статьи о jQuery:

Примеры

Пример:

Повторение одной и той же функции для каждого элемента 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://slyweb.ru/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://slyweb.ru/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://slyweb.ru/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"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://slyweb.ru/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(){
   
$("img").each(function (i) {
this.src = "images/ptica" + i + ".gif";
});

  });
</script>

</head>
<body class="iframe">

 
<img></img>
<img></img>


</body>
</html>

Метод появился в jQuery 1.0

Официальная страница метода - http://api.jquery.com/each/

Форма для комментариев

Версия jQuery 1.4.2 Документ создан 2010-08-21

Ошибки и опечатки
Предложения и жалобы
Поддержка сайта

Александр Ермаков. Хостинг - www.pwstudio.org

Руководство jQuery 1.4.2

Плагины jQuery UI

Эффекты

Возможно, Вам будет интересно прочитать статьи о jQuery: