jQuery — Перебор массива, объекта и элементов

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

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

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

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

Цикл each (jQuery.each)

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

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

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

1. Переберём все элементы массива (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. Переберём все свойства объекта.

   // объект 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 (пременяется только к выбранным элементам):

.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) { // это последний элемент в выборке }
});

Источник: itchief.ru