.each()

.each( function )Возвращает: jQuery

Описание: Итерирование по объекту jQuery, выполнение функции для каждого совпавшего элемента.

версия добавлена: 1.0.each( function )
- function
  
  Тип: Функция( Целое число индекс, Элемент элемент )
  
  Функция для выполнения для каждого совпавшего элемента.

Метод .each() предназначен для создания компактных и менее подверженных ошибкам конструкций для циклов по DOM. При вызове он итерируется по элементам DOM, которые являются частью объекта jQuery. Каждый раз, когда выполняется обратный вызов, ему передаётся текущая итерация цикла, начиная с 0. Более важно, что обратный вызов запускается в контексте текущего элемента DOM, поэтому ключевое слово this относится к элементу.

Предположим, у вас есть простой неупорядоченный список на странице:

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

Вы можете выбрать элементы списка и итерироваться по ним:

$( "li" ).each(function( index ) {
  console.log( index + ": " + $( this ).text() );
});

Таким образом, для каждого элемента списка выводится сообщение:

0: foo
1: bar

Вы можете остановить цикл внутри функции обратного вызова, вернув false.

Примечание: большинство методов jQuery, которые возвращают объект jQuery, также перебирают набор элементов в коллекции jQuery — процесс, известный как неявное итерирование. Когда это происходит, часто нет необходимости явным образом итерироваться с помощью метода .each():

// The .each() method is unnecessary here:
$( "li" ).each(function() {
  $( this ).addClass( "foo" );
});
 
// Instead, you should rely on implicit iteration:
$( "li" ).addClass( "bar" );

Примеры:

Итерирование по трём дивам и установка их свойства цвета.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>each demo</title>
  <style>
  div {
    color: red;
    text-align: center;
    cursor: pointer;
    font-weight: bolder;
    width: 300px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<div>Click here</div>
<div>to iterate through</div>
<div>these divs.</div>
 
<script>
$( document.body ).on( "click", function() {
  $( "div" ).each( function( i ) {
    if ( this.style.color !== "blue" ) {
      this.style.color = "blue";
    } else {
      this.style.color = "";
    }
  } );
} );
</script>
 
</body>
</html>

Демо:

Для доступа к объекту jQuery вместо обычного элемента DOM используйте $( this ). Например:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>each demo</title>
  <style>
  ul {
    font-size: 18px;
    margin: 0;
  }
  span {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
  }
  .example {
    font-style: italic;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
To do list: <span>(click here to change)</span>
<ul>
  <li>Eat</li>
  <li>Sleep</li>
  <li>Be merry</li>
</ul>
 
<script>
$( "span" ).on( "click", function() {
  $( "li" ).each(function() {
    $( this ).toggleClass( "example" );
  });
});
</script>
 
</body>
</html>

Демо:

Используйте return false для преждевременного выхода из циклов each().

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>each demo</title>
  <style>
  div {
    width: 40px;
    height: 40px;
    margin: 5px;
    float: left;
    border: 2px blue solid;
    text-align: center;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></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>
 
<script>
$( "button" ).on( "click", function() {
  $( "div" ).each(function( index, element ) {
    // element == this
    $( element ).css( "backgroundColor", "yellow" );
    if ( $( this ).is( "#stop" ) ) {
      $( "span" ).text( "Stopped at div index #" + index );
      return false;
    }
  });
});
</script>
 
</body>
</html>

.each( function )Возвращает: jQuery

версия добавлена: 1.0.each( function )

Примеры:

Демо:

Демо:

Демо: