Цикл по строкам таблицы jquery

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

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

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

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

Цикл 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”: [
{“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);
}
});

/* Результат (в консоли):
Текущее число: 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(‘https://’) == 0) || (link.indexOf(‘https://’) == 0)) {
console.log(‘href ссылки = ‘ + link);
}
});

// Если на странице расположены следующие ссылки:
// <a href=”https://www.yandex.ru/”>Яндекс</a>
// <a href=”post/2898″>Как работает JavaScript?</a>
// <a href=”https://getbootstrap.com/”>Bootstrap</a>
// То в консоли увидим следующий результат:
// https://www.yandex.ru/
// https://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) {
// это последний элемент в выборке
}
});

// Выполнение останавливается после “три”
return (value !== ‘три’);
});
// Результат: один два три