Статья, в которой рассмотрим на примерах использование функции и метода библиотеки jQuery each.

В библиотеке jQuery имеются 2 разные сущности с названием each.

Первая (jQuery.each) - это универсальная функция jQuery с помощью которой можно осуществить перебор элементов массива или объекта.

Вторая (.each) - это метод, который применяется к набору элементов для организации цикла по ним.

Цикл each (jQuery.each)

Синтаксис функции each:

$.each(array или object,callback);
// array или object - массив или объект, элементы или свойства которого необходимо перебрать
// callback - функция, которая будет выполнена для каждого элемента массива или свойства объекта

Работу с функцией each разберём на следующих примерах:

  1. Переберём все элементы массива (array).jQuery - each array (перебор массива)
    // массив, состоящий из 3 строк
    var arr = ['Автомобиль','Грузовик','Автобус'];
    // переберём массив arr
    $.each(arr,function(index,value){
    
      // действия, которые будут выполняться для каждого элемента массива
      // index - это текущий индекс элемента массива (число)
      // value - это значение текущего элемента массива
      
      //выведем индекс и значение массива в консоль
      console.log('Индекс: ' + index.toString() + '; Значение: ' + value.toString());
    });
    
    // Результат:
    //   Индекс: 0; Значение: Автомобиль
    //   Индекс: 1; Значение: Грузовик
    //   Индекс: 2; Значение: Автобус
    

    В вышеприведённом коде функция each используется для перебора массива. Функция имеет 2 обязательных параметра. Первый параметр - это сущность (массив или объект), элементы (свойства) которой необходимо перебрать. В данном случае - это массив arr. Второй параметр - это функция обратного вызова, которая будет выполнена для каждого элемента (в данном случае) массива. Она имеет 2 параметра, которые доступны внутри неё посредством соответствующих переменных. Первый параметр - это порядковый номер элемента (отсчёт выполняется с 0). Второй параметр - это значение текущего элемента массива.

  2. Переберём все свойства объекта.jQuery - each object (перебор объекта)
    // объект smartphone, имеющий 5 свойств
    var smartphone = {
      "name": "LG G5 se",
      "year": "2016",
      "screen-size": "5.3",
      "screen-resolution": "2560 x 1440",
      "os" : "Android 6.0 (Marshmallow)"
    };
    
    // переберём объект smartphone
    $.each(smartphone, function( key, value ) {
    
      // действия, которые будут выполняться для каждого свойства объекта
      // key - текущее имя свойства массива
      // value - значение текущего свойства объекта
     
      // выведем имя свойства и его значение в консоль
      console.log( 'Свойство: ' +key + '; Значение: ' + value );
    });
    
    // Результат:
    //   Свойство: name; Значение: LG G5 se
    //   Свойство: year; Значение: 2016
    //   Свойство: screen-size; Значение: 5.3
    //   Свойство: screen-resolution; Значение: 2560 x 1440
    //   Свойство: os; Значение: Android 6.0 (Marshmallow)
    

    Функция each может использоваться для перебора JavaScript объектов. Отличие её использования заключается только в том, что параметры функции обратного вызова имеют другие значения. Первый параметр хранит название свойства объекта, а второй - значение этого свойства.

  3. Переберём данные в формате JSON (например, рассмотрим, как использовать вложенные each).
    var articles = {
      "Bootstrap": [
        {"id":"1", "title":"Введение"},
        {"id":"2", "title":"Как установить"},
        {"id":"3", "title":"Сетка"}
      ],
      "JavaScript": [
        {"id":"4", "title":"Основы"},
        {"id":"5", "title":"Выборка элементов"}
      ]  
    };
    
    $.each(articles,function(key,data) {
      console.log('Раздел: ' + key);
      $.each(data, function(index,value) {
        console.log('Статья: id = ' + value['id'] + '; Название = '+ value['title']);
      });
    });
    
    // Результат:
    //   Раздел: Bootstrap
    //   Статья: id = 1; Название = Введение
    //   Статья: id = 2; Название = Как установить
    //   Статья: id = 3; Название = Сетка
    //   Раздел: JavaScript
    //   Статья: id = 4; Название = Основы
    //   Статья: id = 5; Название = Выборка элементов
    

Как прервать each (выход из цикла)

Прерывание (break) цикла each осуществляется с помощью оператора return, который должен возвращать значение false.

Например, прервём выполнение цикла each после того как найдём в массиве arr число 7:

// массив, состоящий из 5 чисел
var arr = [5,4,7,17,19];

// число, которое необходимо найти
var find = 7;

// переберём массив arr
$.each(arr,function(index,value){
  // если необходимое число найдено, то..
  if (value==find) {
    // вывести его в консоль
    console.log('Ура! Число ' + find + ' найдено! Данное число имеет индекс: ' + index);
    // прервать выполнение цикла
    return false;
  } else {
  // иначе вывести в консоль текущее число
  console.log('Текущее число: ' + value.toString());
  }
});

// Результат:
//   Текущее число: 5
//   Текущее число: 4
//   Ура! Число 7 найдено! Данное число имеет индекс: 2

each continue

В each прерывание выполнения текущей итерации и переход к следующей осуществляется с помощью оператора return, который должен иметь значение отличное от false.

// массив, состоящий из чисел
var arr = [3,5,4,9,17,19,30,35,40];

// массив, который должен содержать все элементы массива arr, кроме чётных чисел
var newarr = [];

// переберём массив arr
$.each(arr,function(index,value){

  // если элемент чётный, то пропустить его
  if (value%2==0) {
    // прервать выполнение текущей итерации и перейти к следующей
    return;
  }
  // добавить в массив newarr значение value
  newarr.push(value);

});

console.log('Исходный массив (arr): ' + arr.join());
console.log('Результирующий массив (newarr): ' + newarr.join());

// Результат:
//   Исходный массив (arr): 3,5,4,9,17,19,30,35,40
//   Результирующий массив (newarr): 3,5,9,17,19,35

Перебор текущих элементов (.each)

Синтаксис метода each (пременяется только к выбранным элементам):

jQuery - метод each
.each(function);
// function - функция, которая будет выполнена для каждого элемента текущего объекта

Разберём, как работает метод .each на следующем примере (переберём элементы div):

<div id="id1"></div>
<div id="id2">
  <p></p>
  <hr>
  <p></p>
  <div id="id3"></div>
</div>

<script>
// после загрузки DOM страницы выполнить
$(function(){

  // перебрать элементы div на странице
  $('div').each(function (index, element) {
    // index (число) - текущий индекс итерации (цикла)
      // данное значение является числом
      // начинается отсчёт с 0 и заканчивается количеству элементов в текущем наборе минус 1
    // element - содержит DOM-ссылку на текущий элемент

    console.log('Индекс элемента div: ' + index + '; id элемента = ' + $(element).attr('id')); 
  });

});

// Результат:
  // Индекс элемента div: 0; id элемента = id1
  // Индекс элемента div: 1; id элемента = id2
  // Индекс элемента div: 2; id элемента = id3

</script>

В вышеприведённом примере метод each использует текущий набор (элементы, выбранные посредством селектора $('div')). В качестве обработчика метода each всегда выступает функция, которая будет выполнена для каждого элемента текущего набора (в данном случае для каждого элемента div). Данная функция имеет 2 необязательных параметра. Один из них (index) представляет собой порядковый номер текущей итерации, а второй (element) - DOM ссылку на текущий элемент. Кроме этого внутри функции доступно ключевое слово this, которое также как и второй параметр, содержит DOM-ссылку на текущий элемент.

Например, выведем в консоль значение атрибута href для всех элементов а на странице:

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

Например, выведем в консоль все внешние ссылки, расположенные на странице:

$('a').each(function() {
  var link = $(this).attr('href');
  if ((link.indexOf('http://') == 0) || (link.indexOf('https://') == 0)) {
    console.log('href ссылки = ' + link);
  }
});

// Если на странице расположены следующие ссылки:
  // <a href="https://www.yandex.ru/">Яндекс</a>
  // <a href="post/2898">Как работает JavaScript?</a>
  // <a href="http://getbootstrap.com/">Bootstrap</a>
// То в консоли увидим следующий результат:
  // https://www.yandex.ru/
  // http://getbootstrap.com/

Например, рассмотрим, как организовать цикл each по элементам DOM, имеющих класс name (переберём все элементы одного класса).

<!-- HTML-код -->
<div class="name">Raspberry pi</div>
<div>single-board compute</div>
<div class="name">Intel Galileo Gen2</div>
<div class="price">19$</div>
<div class="name">Pine A64 Plus</div>

<script>
// с помощью функции jQuery.each ($.each)
$.each($('.name'),function(index,data) {
  console.log('Порядковый номер: ' + index + ' ; Содержимое: ' +$(data).text());
});

// с помощью метода jQuery .each 
$('.name').each(function(index,data) {
  console.log('Порядковый номер: ' + index + ' ; Содержимое: ' +$(data).text());
});

// Получим следующий ответ:
//   Порядковый номер: 0 ; Содержимое: Raspberry pi
//   Порядковый номер: 1 ; Содержимое: Intel Galileo Gen2
//   Порядковый номер: 2 ; Содержимое: Pine A64 Plus
</script>

Например, разберём, как перебрать все элементы на странице.

<script>
$('*').each(function() {
  console.log(this);
});
</script>

Например, выведем значение всех элементов input на странице.

$('input').each(function() {
  console.log($(this).val());
});

Например, переберём все дочерние элементы, расположенные в ul с id="myList" (each children).

<!-- HTML список -->
<ul id="myList">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<script>
$('ul#myList').children().each(function(){
  console.log($(this).text());
});

// Результат:
//   HTML
//   CSS
//   JavaScript
</script>

Рассмотрим способ, с помощью которого можно определить последний индекс (элемент) в методе jQuery each.

// выбираем элементы 
var myList =  $('ul li');
// определяем количество элементом в выборке
var total = myList.length;
// осуществляем перебор выбранных элементов
myList.each(function(index) {
  if (index === total - 1) {
    // это последний элемент в выборке
  }
});