Итерация с $.each()

Итерация коллекций и объектов в jQuery посредством $.each()

Метод $.each() предоставляет единый инструмент для обхода массивов, массивоподобных структур, наборов DOM-элементов и обычных объектов. Принцип работы основан на последовательном вызове функции-итератора, куда передаются индекс (или ключ) и текущее значение.

Основной синтаксис

$.each(collection, function(index, value) {
    // работа с элементом
});

collection может быть массивом, строкой, объектом, либо результатом селектора jQuery (например, $('.item')).

Особенности для DOM-коллекций

При передаче набора DOM-элементов в качестве collection в value поступает сам элемент. Часто требуется обернуть его в jQuery-объект для дальнейших операций:

$.each($('.item'), function(i, el) {
    var $el = $(el);
    // работа через jQuery-методы, например:
    $el.addClass('active');
});

Итерация проходит в порядке следования элементов в наборе.

Работа с массивами

При передаче массива index соответствует числовому индексу, value соответствует текущему значению. $.each() корректно итерирует как обычные массивы, так и массивоподобные структуры, в том числе arguments:

var arr = [10, 20, 30];

$.each(arr, function(i, val) {
    // i = 0, val = 10
    // i = 1, val = 20
    // i = 2, val = 30
});

Итерация по объектам

При передаче обычного объекта index принимает имя свойства, value — значение:

var obj = { a: 1, b: 2, c: 3 };

$.each(obj, function(key, val) {
    // key = 'a', val = 1
    // key = 'b', val = 2
    // key = 'c', val = 3
});

Порядок обхода свойств определяется спецификой перечисления свойств объектов JavaScript.

Прерывание цикла

Для досрочного завершения обхода итератор должен вернуть false. Это напоминает break в классических циклах:

$.each(arr, function(i, val) {
    if (val > 15) {
        return false;    // прекращение итерации
    }
});

Возврат любого другого значения не влияет на продолжение обхода.

Пропуск текущего шага

Для пропуска текущей итерации используется return true, что аналогично continue:

$.each(arr, function(i, val) {
    if (val === 20) {
        return true;     // пропустить текущий элемент
    }
    // остальная логика
});

Контекст итерации

Внутри callback-функции ключевое слово this указывает на текущее значение коллекции. Для DOM-элементов this представляет собой сам элемент, что удобно в сочетании с обёрткой jQuery:

$.each($('.item'), function(i) {
    $(this).toggleClass('highlight');
});

Использование this повышает читабельность и уменьшает количество временных переменных.

Сравнение с встроенными методами JavaScript

$.each() появился раньше большинства современных методов массивов (forEach, map, filter). Сейчас эти методы читаемы и эффективны при работе с данными. $.each() остаётся востребованным при манипуляциях с DOM-коллекциями, а также когда требуется единый интерфейс обхода для разных видов коллекций, включая объекты.

Итерирование результатов AJAX и структур данных

При обработке данных, возвращённых AJAX-запросом (например, JSON-объекты или массивы), $.each() упрощает навигацию по структурам любой глубины. Метод особенно удобен, когда требуется одинаковая логика обхода без предварительного приведения типов к массиву.

Краткие акценты

  • Универсальность: единый способ обхода объектов, массивов и DOM-коллекций.
  • Управление циклом: return false для остановки, return true для пропуска текущего шага.
  • Контекст: this указывает на значение текущего элемента, что удобно для DOM.
  • Актуальность: в современных проектах часто комбинируется с нативными методами массивов, но остаётся полезным в экосистеме jQuery для DOM-ориентированных задач.

Использование $.each() помогает унифицировать подход к итерации данных разного типа, упрощая код и делая его более предсказуемым в рамках jQuery-парадигмы.

Оглавление