Содержание
Функция 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 » , подготовленной дружной командой проекта Интернет-технологии.ру
У меня есть загрузка divs с классом testimonial и я хочу использовать jquery для цикла через них, чтобы проверить для каждого div, если определенное условие истинно. Если это правда, он должен выполнить действие.
кто-нибудь знает, как я это сделаю?
14 ответов
использовать каждый: ‘ i — это позиция в массиве, obj — это объект DOM, который вы повторяете (можно получить доступ через оболочку jQuery $(this) так же).
Регистрация ссылка на api для получения дополнительной информации.
Есть функция, которая перебирает все элементы на странице с определённым классом и поочерёдно сбрасывает с них стили:
Но как можно сделать так, чтобы перебирались только те блоки, у которых, например, атрибут id больше 6 и меньше 10 и анимировались только они?
2 ответа 2
Когда вставляете новые строки, назначайте им специальный класс, который означает что элемент требуется анимировать, потом по таймауту убираете этот класс — включается анимация. Таким образом анимироваться будут только последние добавленные элементы.
PS. Старайтесь избегать использования id для адресации элементов для JS а также использования встроенных стилей.