jQuery метод .each()

Определение и применение

jQuery метод .each() производит перебор элементов коллекции jQuery, выполняя при этом функцию для каждого из них.

jQuery синтаксис:

Синтаксис 1.0:

Код
$( selector ).each( function( index, element ) )

function - Function

index - Integer

element - Element

Добавлен в версии jQuery

1.0

Значения параметров

Параметр Описание
function(index, element) Функция, которая производит перебор элементов коллекции jQuery (начиная с индекса 0). Внутри функции this ссылается на текущий элемент в наборе.
  • index - индекс позиции элемента в наборе (среди выбранных элементов).
  • element - текущий элемент в наборе.

Пример использования

Метод .each() — пример 1

Нажмите ▶. Измените JavaScript и запустите пример повторно. Используется jQuery 3.1.1.

index.html
HTML
<ul>
  <li>Первый</li>
  <li>Второй</li>
  <li>Третий</li>
  <li>Четвертый</li>
  <li>Пятый</li>
</ul>
main.js
JavaScript
$(document).ready(function () {
    $('li').each(function (index, element) {
        // производим перебор элементов <li> коллекции jQuery
        if (index % 2 != 0) {
            // если остаток от деления индекса элемента на 2 не равен нулю
            $(this).css('color', 'green') // устанавливаем цвет текста текущему элементу
        }
    })
})
style.css
CSS
body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

В этом примере с использованием jQuery метода .each() мы производим перебор всех элементов <li> коллекции jQuery, выполняя при этом функцию для каждого из них, которая проверяет остаток от деления индекса элемента деленного 2, и если он не равен нулю, то устанавливает с помощью метода .css() цвет текста зеленый. Цвет текста будет установлен всем четным элементам <li>.