jQuery each: перебор массивов, объектов и элементов DOM в циклах

В этой статье мы рассмотрим, как можно перебирать массивы, объекты и элементы DOM с помощью методов jQuery each. Помимо этого, вы узнаете, как можно прервать цикл или пропустить итерацию при работе с jQuery each.

jQuery $.each()

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

Синтаксис метода $.each() выглядит следующим образом:

$.each(collection, callback(index, value){
    // код, выполняемый для каждого элемента
});

Параметр collection представляет собой массив или объект, по которому будет производиться итерация. Функция callback выполняется для каждого элемента в коллекции и принимает два параметра: index и value. Параметр index представляет текущий индекс обрабатываемого элемента, а value — значение текущего элемента.

Итерация по массиву:

const genres = ['Action', 'Comedy', 'Drama', 'Sci-Fi'];

$.each(genres, function(index, genre){
    console.log('Индекс: ' + index + ', жанр: ' + genre);
});

Результат:

Индекс: 0, жанр: Action
Индекс: 1, жанр: Comedy
Индекс: 2, жанр: Drama
Индекс: 3, жанр: Sci-Fi

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

const person = {
    name: 'Lucas',
    age: 36,
    profession: 'JavaScript Developer'
};
$.each(person, function(key, value){
    console.log('Характеристика: ' + key + ', значение: ' + value);
});

Результат:

Характеристика: name, значение: Lucas
Характеристика: age, значение: 36
Характеристика: profession, значение: JavaScript Developer

Итерация по массиву объектов:

const cars = [
    { brand: 'Toyota', model: 'Camry', year: 2019 },
    { brand: 'Honda', model: 'Civic', year: 2020 },
    { brand: 'Ford', model: 'Mustang', year: 2018 }
];

$.each(cars, function(index, car) {
    console.log('Индекс: ' + index + ', марка: ' + car.brand + ', модель: ' + car.model + ', год выпуска: ' + car.year);
});

Результат:

Индекс: 0, марка: Toyota, модель: Camry, год выпуска: 2019
Индекс: 1, марка: Honda, модель: Civic, год выпуска: 2020
Индекс: 2, марка: Ford, модель: Mustang, год выпуска: 2018

Итерация по коллекции объектов jQuery:

<ul id="categories">
    <li>Электроника</li>
    <li>Одежда</li>
    <li>Дом и сад</li>
    <li>Спорт и отдых</li>
</ul>

$.each($('#categories > li'), function(index, category) {
    console.log('Индекс: ' + index + ', категория: ' + $(category).text());
});

Результат:

Индекс: 0, категория: Электроника
Индекс: 1, категория: Одежда
Индекс: 2, категория: Дом и сад
Индекс: 3, категория: Спорт и отдых

В методе $.each() нельзя использовать операторы break и continue для управления итерациями, как это делается в обычных циклах. Однако реализовать прерывание цикла и пропуск итерации возможно с помощью оператора return.

Если мы хотим прервать цикл, нужно вызвать return false в его теле. Для пропуска итерации необходимо сделать вызов return true.

// выведем в консоль только нечетные числа меньше 7
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

$.each(numbers, function(index, value) {
    // если на текущей итерации мы дошли до числа 7, прерываем цикл
    if (value === 7) {
        return false; 
    }
  
    // пропускаем итерации для четных чисел
    if (value % 2 === 0) {
        return true;
    }
  
    // выводим число в консоль
    console.log(value);
});

Результат:

1
3
5

jQuery $(selector).each()

$(selector).each() — это метод jQuery, который обеспечивает наиболее удобное выполнение итераций по элементам DOM, выбранным с помощью селектора.

Общий синтаксис метода $(selector).each() такой:

$(selector).each(function(index, element) {
    // действия, выполняемые для каждого элемента
});

Коллекция DOM-элементов выбирается по селектору selector. Callback-функция, которую принимает метод в качестве параметра, будет вызвана для каждого элемента коллекции. В эту функцию передается два параметра: index (индекс текущего элемента начиная с 0) и element (текущий элемент итерации).

<ul id="characteristics">
    <li>Модель</li>
    <li>Производитель</li>
    <li>Вес</li>
    <li>Цвет</li>
</ul>

$('#characteristics > li').each(function(index, element) {
    console.log('Индекс: ' + index + ', значение: ' + $(element).text());
});

Вместо параметра element функции обратного вызова, можно употреблять ключевое слово this:

$('#characteristics > li').each(function(index) {
    console.log('Индекс: ' + index + ', значение: ' + $(this).text());
});

Результат:

Индекс: 0, значение: Модель
Индекс: 1, значение: Производитель
Индекс: 2, значение: Вес
Индекс: 3, значение: Цвет

Заключение

Таким образом, с помощью методов jQuery each можно легко и удобно перебирать массивы, объекты и элементы DOM. Эти методы можно использовать для манипуляции с DOM-элементами, обработки данных, фильтрации и многих других задач.