jQuery each: Как использовать цикл each в jQuery

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

Пример использования jQuery.each() для итерации по массиву:

var arr = [1, 2, 3, 4, 5];

$.each(arr, function(index, value) {
    console.log("Индекс: " + index + ", Значение: " + value);
});

Результат выполнения кода:

Индекс: 0, Значение: 1
Индекс: 1, Значение: 2
Индекс: 2, Значение: 3
Индекс: 3, Значение: 4
Индекс: 4, Значение: 5

Пример использования jQuery.each() для итерации по объекту:

var obj = {name: "John", age: 30, city: "New York"};

$.each(obj, function(key, value) {
    console.log("Ключ: " + key + ", Значение: " + value);
});

Результат выполнения кода:

Ключ: name, Значение: John
Ключ: age, Значение: 30
Ключ: city, Значение: New York

Пример использования jQuery.each() для итерации по элементам DOM:

HTML:

<ul>
    <li>Элемент 1</li>
    <li>Элемент 2</li>
    <li>Элемент 3</li>
</ul>

JavaScript:

$("li").each(function(index, element) {
    console.log("Индекс: " + index + ", Текст: " + $(this).text());
});

Результат выполнения кода:

Индекс: 0, Текст: Элемент 1
Индекс: 1, Текст: Элемент 2
Индекс: 2, Текст: Элемент 3

Функция jQuery.each() принимает два аргумента: коллекцию, по которой будет выполнена итерация, и функцию-обработчик, которая будет вызываться для каждого элемента в коллекции. Обработчик получает два параметра: индекс элемента и сам элемент. В функции-обработчике вы можете выполнять любые действия с элементом, такие как взаимодействие с DOM или обработка данных.

jQuery.each() также поддерживает использование ключей и значений при итерации по объектам, что очень удобно при работе с данными в формате JSON.

В заключение, jQuery.each() – это мощный и гибкий метод для выполнения итераций по коллекциям в jQuery. Он позволяет легко обрабатывать элементы DOM, массивы и объекты, что упрощает разработку интерактивных веб-страниц.