Содержание
В этой статье разберем простой пример применения функции each jQuery для перебора элементов массива или объекта.
Скрипт для перебора элементов на странице
Скрипт из примера ниже был использован на одном из html-сайтов: на нем была проблема публикации работ в портфолио, т. к. при добавлении новых записей нумерация сдвигалась вниз. Т.е. "Работа 1" при добавлении, например, пятнадцати новых записей, становилась "Работой 16". Поэтому смена нумерации вручную занимала довольно большое количество времени.
Чтобы этого избежать, был использован простой скрипт, который автоматом сдвигает нумерацию при добавлении новых постов.
Допустим, на сайте пять работ с заголовком h1:
<h1 class="work_title"></h1>
<h1 class="work_title"></h1>
<h1 class="work_title"></h1>
<h1 class="work_title"></h1>
Скрипт для автоматического сдвига нумерации при добавлении нового заголовка (работы):
$i=0;
$('.work_title').each(function(){ // перебор заголовков
$i++; //оператор инкремента, который увеличивается на 1 с каждым заголовком
$(this).text('Работа ' + $i); // добавляем текст заголовку и нумерацию
})
})
Пример работы скрипта
При добавлении новых заголовков h1 нумерация автоматически смещается вниз
Перебор массивов
Скрипт для вывода элементов массива
let arr = ['Иван','Петр','Алексей, Ирина']; // задаем массив
$.each(arr,function(){ // перебор массива
console.log(arr[0]); // вывод первого элемента массива в консоль
console.log(arr[1]); // вывод второго элемента массива в консоль
console.log(arr[2]); // вывод третьего элемента массива в консоль
console.log(arr[3]); // вывод четвертого элемента массива в консоль
});
})
Скрипт для вывода индексов и значений массива
let arr = ['Иван','Петр','Алексей, Ирина']; // задаем массив
$.each(arr,function(index,value){ // перебор массива
console.log('Индекс: ' + index + '; Значение: ' + value); // вывод индексов и значений массива в консоль
});
})
