Это обширный обзор функции jQuery.each() — одной из наиболее важных и наиболее часто используемых функций jQuery. В этой статье мы узнаем почему и посмотрим, как вы можете его использовать.
Эта популярная статья была обновлена в 2020 году, чтобы отразить текущую передовую практику и обновить рекомендации по нативным решениям с использованием современного JavaScript.
Что такое jQuery.each ()
Функция each () jQuery используется для циклического прохождения каждого элемента целевого объекта jQuery — объекта, который содержит один или несколько элементов DOM и предоставляет все функции jQuery. Это очень полезно для многоэлементных манипуляций с DOM, а также для перебора произвольных массивов и свойств объекта.
В дополнение к этой функции jQuery предоставляет вспомогательную функцию с тем же именем, которую можно вызывать без предварительного выбора или создания каких-либо элементов DOM.
Синтаксис jQuery.each ()
Давайте посмотрим на различные режимы в действии.
В следующем примере выбирается каждый элемент <div> на веб-странице и выводится индекс и идентификатор каждого из них:
// DOM ELEMENTS $('div').each(function(index, value) { console.log(`div${index}: ${this.id}`); });
Возможный результат будет:
div0:header div1:main div2:footer
Эта версия использует функцию jQuery $(selector).each() , а не функцию полезности.
В следующем примере показано использование функции полезности. В этом случае объект для зацикливания задается в качестве первого аргумента. В этом примере мы покажем, как перебрать массив:
// ARRAYS const arr = [ 'one', 'two', 'three', 'four', 'five' ]; $.each(arr, function(index, value) { console.log(value); // Will stop running after "three" return (value !== 'three'); }); // Outputs: one two three
В последнем примере мы хотим продемонстрировать, как перебирать свойства объекта:
// OBJECTS const obj = { one: 1, two: 2, three: 3, four: 4, five: 5 }; $.each(obj, function(key, value) { console.log(value); }); // Outputs: 1 2 3 4 5
Все это сводится к обеспечению надлежащего обратного вызова. Контекст обратного вызова, this , будет равен его второму аргументу, который является текущим значением. Однако, поскольку контекст всегда будет объектом, примитивные значения должны быть обернуты:
$.each({ one: 1, two: 2 } , function(key, value) { console.log(this); }); // Number { 1 } // Number { 2 }
`
Это означает, что нет строгого равенства между значением и контекстом.
$.each({ one: 1 } , function(key, value) { console.log(this == value); console.log(this === value); }); // true // false
`
Первым аргументом является текущий индекс, который является либо числом (для массивов), либо строкой (для объектов).
1. Пример базовой функции jQuery.each ()
Давайте посмотрим, как функция jQuery.each () помогает нам в сочетании с объектом jQuery. Первый пример выбирает все элементы a на странице и выводит их атрибут href :
$('a').each(function(index, value){ console.log(this.href); });
Второй пример выводит каждый внешний href на веб-странице (при условии только протокола HTTP (S)):
$('a').each(function(index, value){ const link = this.href; if (link.match(/https?:\/\//)) { console.log(link); } });
Допустим, у нас были следующие ссылки на странице:
<a href="https://www.sitepoint.com/">SitePoint</a> <a href="https://developer.mozilla.org">MDN web docs</a> <a href="http://example.com/">Example Domain</a>
Второй пример будет выводить:
https://www.sitepoint.com/ https://developer.mozilla.org/ http://example.com/
Следует отметить, что элементы DOM из объекта jQuery находятся в «родной» форме внутри обратного вызова, переданного в jQuery.each() Причина в том, что jQuery на самом деле является просто оболочкой для массива элементов DOM. Используя jQuery.each() , этот массив повторяется так же, как и обычный массив. Поэтому мы не получаем упакованные элементы из коробки.
Со ссылкой на наш второй пример это означает, что мы можем получить атрибут href элемента, написав this.href . Если бы мы хотели использовать метод attr() в jQuery , нам нужно было бы $(this).attr('href') элемент следующим образом: $(this).attr('href') .
2. Пример массива jQuery.each ()
Давайте еще раз посмотрим, как можно обрабатывать обычный массив:
const numbers = [1, 2, 3, 4, 5]; $.each(numbers, function(index, value){ console.log(`${index}: ${value}`); });
Этот фрагмент выводит:
0:1 1:2 2:3 3:4 4:5
Здесь нет ничего особенного. Массив имеет числовые индексы, поэтому мы получаем числа от 0 до N-1 , где N — количество элементов в массиве.
3. Пример JQuery.each () JSON
У нас могут быть более сложные структуры данных, такие как массивы в массивах, объекты в объектах, массивы в объектах или объекты в массивах. Давайте посмотрим, как jQuery.each() может помочь нам в таких сценариях:
const colors = [ { 'red': '#f00' }, { 'green': '#0f0' }, { 'blue': '#00f' } ]; $.each(colors, function() { $.each(this, function(name, value) { console.log(`${name} = ${value}`); }); });
Этот пример выводит:
red = #f00 green = #0f0 blue = #00f
Мы обрабатываем вложенную структуру с помощью вложенного вызова jQuery.each() . Внешний вызов обрабатывает массив переменных colors ; внутренний вызов обрабатывает отдельные объекты. В этом примере каждый объект имеет только один ключ, но в общем случае любой номер может быть обработан с помощью этого кода.
4. Пример класса jQuery.each ()
В этом примере показано, как productDescription каждый элемент с назначенным классом productDescription заданным в HTML ниже:
<div class="productDescription">Red</div> <div>Pink</div> <div class="productDescription">Orange</div> <div class="generalDescription">Teal</div> <div class="productDescription">Green</div>
Мы используем помощник each() вместо метода each() в селекторе.
$.each($('.productDescription'), function(index, value) { console.log(index + ':' + $(value).text()); });
В этом случае вывод:
0:Red 1:Orange 2:Green
Нам не нужно включать индекс и значение. Это просто параметры, которые помогают определить, на каком элементе DOM мы сейчас выполняем итерацию. Кроме того, в этом сценарии мы также можем использовать более удобный each метод. Мы можем написать это так:
$('.productDescription').each(function() { console.log($(this).text()); });
И мы получим это на консоли:
Red Orange Green
Обратите внимание, что мы оборачиваем элемент DOM в новый экземпляр jQuery, чтобы мы могли использовать метод text() jQuery для получения текстового содержимого элемента.
5. Пример задержки jQuery.each ()
В следующем примере, когда пользователь щелкает по элементу с идентификатором 5demo все элементы списка будут немедленно 5demo оранжевым цветом.
<ul id="5demo"> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> </ul>
После задержки, зависящей от индекса ( 0 , 200 , 400 ,… миллисекунд), мы постепенно затухаем:
$('#5demo').on('click', function(e) { $('li').each(function(index) { $(this).css('background-color', 'orange') .delay(index * 200) .fadeOut(1500); }); e.preventDefault(); });
Вывод
В этом посте мы продемонстрировали, как использовать jQuery.each() для перебора элементов, массивов и объектов DOM. Это мощная и экономящая время маленькая функция, которую разработчики должны иметь в своих наборах инструментов.
И если jQuery не ваша вещь, вы можете посмотреть на использование нативных методов JavaScript Object.keys () и Array.prototype.forEach () . Существуют также библиотеки, такие как foreach, которые позволяют перебирать пары значений ключа либо объекта, подобного массиву, либо объекта, подобного словарю.
Помните: $.each() и $(selector).each() — это два разных метода, определенных двумя разными способами.