Jquery перебор элементов в цикле

Jquery перебор элементов в цикле

Цикл each (jQuery.each). Примеры использования

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

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

Работу с функцией each разберём на примерах.

Пример №1. В нём выполним переберор всех элементов массива (array).

// массив, состоящий из 3 строк var arr = ; // переберём массив arr $.each(arr,function(index,value){ // действия, которые будут выполняться для каждого элемента массива // index — это текущий индекс элемента массива (число) // value — это значение текущего элемента массива //выведем индекс и значение массива в консоль console.log(‘Индекс: ‘ + index + ‘; Значение: ‘ + value); }); /* Результат (в консоли): Индекс: 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. В нём осуществим перебор более сложной структуры (рассмотрим, как использовать вложенные each).

// объект, состоящий из 2 свойств. Каждое свойство этого объект имеет в качестве значения массив, элементами которого являются тоже объекты var articles = { «Bootstrap»: , «JavaScript»: }; $.each(articles,function(key,data) { console.log(‘Раздел: ‘ + key); $.each(data, function(index,value) { console.log(‘Статья: id = ‘ + value + ‘; Название = ‘+ value); }); }); /* Результат: Раздел: Bootstrap Статья: id = 1; Название = Введение Статья: id = 2; Название = Как установить Статья: id = 3; Название = Сетка Раздел: JavaScript Статья: id = 4; Название = Основы Статья: id = 5; Название = Выборка элементов */

Как прервать each (выйти из цикла)?

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

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

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

Как перейти к следующей итерации (each continue)?

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

// массив, состоящий из чисел var arr = ; // массив, который должен содержать все элементы массива 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) { // это последний элемент в выборке } });


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *