Функция each jQuery используется для перебора элементов объекта jQuery . Он содержит один или несколько элементов DOM и предоставляет все функции jQuery . Дополнительно jQuery предоставляет вспомогательную функцию с тем же именем, которая может быть вызвана без предварительного выбора или создания элементов DOM . Давайте узнаем об этом более подробно.
Синтаксис функции jQuery .each()
В следующем примере мы выбираем на веб-странице все элементы div и выводим индекс и идентификатор каждого из них. Возможный результат: “ div0:header ”, “ div1:body ”, “ div2:footer ”. В примере используется функция jQuery each() , а не вспомогательная:
В следующем примере продемонстрировано использование вспомогательной функции. В данном случае объект, для которого выполняется цикл, задается в качестве первого аргумента. В этом примере я покажу, как перебрать массив через цикл с помощью jQuery each function :
В последнем jQuery each примере я хочу представить циклы через свойства объекта:
Все это сводится к формированию надлежащего обратного вызова. Контекст обратного вызова this будет равен второму аргументу, который является текущим значением. Но поскольку контекст всегда будет объектом, то простые значения должны быть « обернуты ». Поэтому строгое равенство между значением и контекстом не может быть задано. Первый аргумент — текущий индекс, который является числом для jQuery each array или строкой ( для объектов ).
- Основной пример использования функции jQuery .each ()
Давайте посмотрим, как функция each() применяется в сочетании с объектом jQuery . В первом примере выбираются все элементы a на странице, и выводится их атрибут href :
Во втором примере использования jQuery each object выводятся все внешние href на веб-странице ( при условии, что используется протокол HTTP ):
Предположим, что на странице есть следующие ссылки:
Второй код выдаст:
Элементы DOM из объекта jQuery при использовании внутри each() необходимо снова « обернуть ». Потому что сам jQuery — это фактически контейнер для массива элементов DOM . С помощью jQuery each function этот массив обрабатывается так же, как и обычный. Поэтому мы не получаем обернутые элементы сразу после обработки.
Еще раз рассмотрим, как можно обрабатывать обычный массив:
Результат выполнения кода: 0:1, 1:2, 2:3, 3:4, 4:5 и 5:6.
Массив содержит числовые индексы, поэтому мы получаем числа, начиная с 0 и до N — 1 , где N — количество элементов в массиве.
У нас могут быть более сложные структуры данных, такие как массивы в массивах, объекты в объектах, массивы в объектах или объекты в массивах. Давайте рассмотрим, как jQuery find each может применяться в подобных сценариях:
Результат выполнения кода: red=#f00, green=#0f0, blue=#00f.
Мы обрабатываем структуру с помощью вложенного вызова each() . Внешний вызов обрабатывает массив переменной JSON , внутренний вызов обрабатывает объекты. В этом примере каждый jQuery each element имеет только один ключ. Но с помощью представленного кода может быть присвоено любое количество ключей.
В этом примере показано, как перебрать каждый элемент с классом productDescription :
Вместе с селектором мы используем вспомогательную функцию each() вместо метода each() :
Результат использования jQuery each function будет следующим: 0:Красный , 1: Оранжевый , 2:Зеленый .
Нам не нужно использовать индекс и значение. Это параметры, которые помогают определить, какой элемент DOM в настоящее время обрабатывается циклом. Кроме этого в сценарии можно использовать более удобный метод each() :
Красный
Оранжевый
Зеленый
Нужно обернуть элемент DOM в новый экземпляр jQuery . Мы используем метод text() для получения текста элемента.
- Пример задержки с помощью jQuery.each ()
В данном jQuery each примере, когда пользователь нажимает на элемент с идентификатором 5demo , для всех элементов списка устанавливается оранжевый цвет. После зависимой от индекса задержки ( 0, 200, 400, … миллисекунд ) мы постепенно скрываем элемент:
Заключение
Рекомендуется использовать jQuery each function , когда это только возможно. Это позволяет решить множество проблем! Вне jQuery разработки лучше использовать функцию forEach() любого массива ECMAScript 5 .
Помните: $.each() и $(selector).each() — это два разных метода, определяемых по-разному.
Данная публикация представляет собой перевод статьи « 5 jQuery each() Function Examples » , подготовленной дружной командой проекта Интернет-технологии.ру
Материал из JQuery
Выполняет функцию callback для каждого из выбранных элементов. В callback передаются 2 параметра: номер элемента в наборе (нумерация начинается с нуля) и сам элемент в виде объекта DOM.
В отличие от схожего метода .map(), который возвращает заново сформированный набор различных элементов и объектов, метод .each() возвращает исходный набор элементов.
В действии
Узнаем высоту всех div-элементов на странице:
Нужно отметить, что переменная this, внутри функции callback, будет хранить то же самое значение, что и второй параметр domElement, который в нее передается. Таким образом, предыдущий пример мог выглядеть следующим образом:
Каждый более или менее опытный разработчик понимает значимость возможности использования массивов для реализации тех или иных задач в своих проектах. Если говорить о PHP-скриптах то одним из популярных для работы с массивами является цикл foreach.
На стороне клинта для работы с html элементами так же может потребоваться возможность использования массивов в цикле, в JQuery такая возможность реализована в виде
конструкции $.each.
Одномерные массивы в jQuery $.each:
В консоли наблюдаем результат:
один
два
три
четыре
пять
По аналогии можно так же работать с объектами, к примеру, вы используете JSON для обмена данными с сервером, и вам нужно использовать данные в цикле.
Объекты в цикле jQuery $.each:
Результат:
ID: 1
Имя: Вася
Фамилия: Пупкин
ID: 2
Имя: Александр
Фамилия: Тихов
ID: 3
Имя: Федор
Фамилия: Корнев
Перебор элементов в списке с помощью jQuery $.each
Пожалуй, не менее полезная возможность перебора элементов в списке. В нашем примере это элементы
в списке
-
. Мы зададим цвет шрифта для всех элементов списка, посредством цикла.
Перебор элементов на странице с помощью jQuery $.each
По аналогии с предыдущим примером, мы можем перебрать все элементы на странице, выполняя с ними какие-либо манипуляции.
На этом пока всё, продолжать примеры по аналогии можно долго, читайте лучше об этом в документации, основы основ показаны в этом посту, надеюсь, материал будет вам полезен.
