5 примеров использования функции jQuery .each()

0 ∞

Функция each jQuery используется для перебора элементов объекта jQuery. Он содержит один или несколько элементов DOM и предоставляет все функции jQuery. Дополнительно jQuery предоставляет вспомогательную функцию с тем же именем, которая может быть вызвана без предварительного выбора или создания элементов DOM. Давайте узнаем об этом более подробно.

Содержание

Синтаксис функции jQuery .each()

В следующем примере мы выбираем на веб-странице все элементы div и выводим индекс и идентификатор каждого из них. Возможный результат: “div0:header”, “div1:body”, “div2:footer”. В примере используется функция jQuery each(), а не вспомогательная:

// Элементы DOM
$('div').each(function (index, value) { 
  console.log('div' + index + ':' + $(this).attr('id')); 
});

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

// Массивы
var arr = [
   'один',
   'два',
   'три',
   'четыре',
   'пять'
];
$.each(arr, function (index, value) {
  console.log(value);
  
  // Выполнение останавливается после "три"
  return (value !== 'три');
});
// Результат: один два три
Создаем простое JavaScript слайд-шоу без использования JQuery

В последнем jQuery each примере я хочу представить циклы через свойства объекта:

// Объекты
var obj = {
   one: 1,
   two: 2,
   three: 3,
   four: 4,
   five: 5
};
$.each(obj, function (index, value) {
  console.log(value);
});
// Результат: 1 2 3 4 5

Все это сводится к формированию надлежащего обратного вызова. Контекст обратного вызова this будет равен второму аргументу, который является текущим значением. Но поскольку контекст всегда будет объектом, то простые значения должны быть «обернуты». Поэтому строгое равенство между значением и контекстом не может быть задано. Первый аргумент - текущий индекс, который является числом для jQuery each array или строкой (для объектов).

Основной пример использования функции jQuery .each ()

Давайте посмотрим, как функция each() применяется в сочетании с объектом jQuery. В первом примере выбираются все элементы a на странице, и выводится их атрибут href:

$('a').each(function (index, value){
  console.log($(this).attr('href'));
});

Во втором примере использования jQuery each object выводятся все внешние href на веб-странице (при условии, что используется протокол HTTP):

$('a').each(function (index, value){
  var link = $(this).attr('href');
  if (link.indexOf('http://') === 0) {
    console.log(link);
  }
});
Примеры jQuery-функции setTimeout()

Предположим, что на странице есть следующие ссылки:

<a href="http://www.jquery4u.com">JQUERY4U</a>
<a href="http://www.phpscripts4u.com">PHP4U</a>
<a href="http://www.blogoola.com">BLOGOOLA</a>

Второй код выдаст:

http://jquery4u.com
http://www.phpscripts4u.com
http://www.blogoola.com

Элементы DOM из объекта jQuery при использовании внутри each() необходимо снова «обернуть». Потому что сам jQuery - это фактически контейнер для массива элементов DOM. С помощью jQuery each function этот массив обрабатывается так же, как и обычный. Поэтому мы не получаем обернутые элементы сразу после обработки.

Пример массива jQuery.each()

Еще раз рассмотрим, как можно обрабатывать обычный массив:

var numbers = [1, 2, 3, 4, 5, 6];
$.each(numbers , function (index, value){
  console.log(index + ':' + value); 
});

Результат выполнения кода: 0:1, 1:2, 2:3, 3:4, 4:5 и 5:6.

Массив содержит числовые индексы, поэтому мы получаем числа, начиная с 0 и до N - 1, где N - количество элементов в массиве.

Пример JSON JQuery.each()

У нас могут быть более сложные структуры данных, такие как массивы в массивах, объекты в объектах, массивы в объектах или объекты в массивах. Давайте рассмотрим, как jQuery find each может применяться в подобных сценариях:

var json = [ 
 { 'red': '#f00' },
 { 'green': '#0f0' },
 { 'blue': '#00f' }
];
$.each(json, function () {
   $.each(this, function (name, value) {
      console.log(name + '=' + value);
   });
});
jQuery для JavaScript

Результат выполнения кода: red=#f00, green=#0f0, blue=#00f.

Мы обрабатываем структуру с помощью вложенного вызова each(). Внешний вызов обрабатывает массив переменной JSON, внутренний вызов обрабатывает объекты. В этом примере каждый jQuery each element имеет только один ключ. Но с помощью представленного кода может быть присвоено любое количество ключей.

Пример класса jQuery.each()

В этом примере показано, как перебрать каждый элемент с классом productDescription:

<div class="productDescription">Красный</div>
<div>Розовый</div>
<div class="productDescription">Оранжевый</div>
<div class="generalDescription">Синевато-зеленый</div>
<div class="productDescription">Зеленый</div>

Вместе с селектором мы используем вспомогательную функцию each() вместо метода each():

$.each($('.productDescription'), function (index, value) { 
  console.log(index + ':' + $(value).text()); 
});

Результат использования jQuery each function будет следующим: 0:Красный, 1: Оранжевый, 2:Зеленый.

Нам не нужно использовать индекс и значение. Это параметры, которые помогают определить, какой элемент DOM в настоящее время обрабатывается циклом. Кроме этого в сценарии можно использовать более удобный метод each():

$('.productDescription').each(function () { 
  console.log($(this).text());
});

Результат:

Красный
Оранжевый
Зеленый

Нужно обернуть элемент DOM в новый экземпляр jQuery. Мы используем метод text() для получения текста элемента.

Пример задержки с помощью jQuery.each ()

В данном jQuery each примере, когда пользователь нажимает на элемент с идентификатором 5demo, для всех элементов списка устанавливается оранжевый цвет. После зависимой от индекса задержки (0, 200, 400, ... миллисекунд) мы постепенно скрываем элемент:

$('#5demo').bind('click', function (e) {
  $('li').each(function (index) {
    $(this).css('background-color', 'orange')
          .delay(index * 200)
          .fadeOut(1500);
  });
  e.preventDefault();
});

Заключение

Рекомендуется использовать jQuery each function, когда это только возможно. Это позволяет решить множество проблем! Вне jQuery разработки лучше использовать функцию forEach() любого массива ECMAScript 5.

Помните: $.each() и $(selector).each() - это два разных метода, определяемых по-разному.