Код

#статьи

12 апр 2023
0

Функции each() в библиотеке jQuery: как с их помощью строить циклы

Рассказываем об универсальных вспомогательных функциях each(): для чего нужны, чем различаются и как работают.

Иллюстрация: Оля Ежак для Skillbox Media

Марина Демидова

Программист, консультант, специалист по документированию. Легко и доступно рассказывает о сложных вещах в программировании и дизайне.

В библиотеке jQuery есть две функции, которые используют для перебора элементов в циклах:

$.each() — универсальная, для массивов и объектов. Это одна из самых популярных функций библиотеки.

$(selector).each() — вспомогательная, используется только с объектами jQuery.

В этой статье вы узнаете:

Как перебрать массив с помощью each()
Как перебирать объекты
Как перебрать DOM-элементы
Что используют вместо break и continue в циклах c each()

Перебор массива

Чтобы перебрать массив, применяют функцию jQuery $.each(). Она выглядит так:

$.each(array, callback)

У неё есть два обязательных параметра:

array — массив;

callback — функция, выполняемая для каждого элемента массива. Она выглядит так:

function(index, value)

Здесь index — индекс, а value — значение текущего элемента.

Элементы массива итерируются по числовому индексу от 0 до length − 1, где length — длина массива.

Пример 1. Переберём массив arrf и выведем индекс и значение каждого элемента в консоль:

// Объявляем массив arrf
var arrf = ['square', 'circle', 'triangle'];


// Перебор массива
$.each(arrf, function(inf, valf){


 // inf — индекс текущего элемента
  // valf — его значение


  // Вывод в консоль
  console.log(inf + ': ' + valf);


})

Получим:

0: square
1: circle
2: triangle

Перебор объектов

Чтобы перебрать свойства объекта, в jQuery также применяют $.each(). При этом используется пара ключ: значение, где ключ — это строка с именем свойства, а значение — значение свойства (оно может быть любого типа).

Функция выглядит так:

$.each(obj, callback)

Здесь obj — это объект;

callback — функция вида function(key, value), выполняемая для каждого свойства объекта.

Пример 2. Зададим объект cat с определёнными свойствами. Выведем названия и значения этих свойств в консоль.

// Зададим объект и определим его свойства
var cat = {
    animal: "Кот",
    name: "Мурзик",
    color: "Рыжий",
    eyes: "Зелёные",
    wool: "Короткошёрстный",
    breed: "Беспородный"
    };
   
    // Переберём свойства объекта
    $.each(cat, function(key, value) {
   
    // key — название свойства
    // value — его значение
   
    // Вывод в консоль
    console.log(key + ': ' + value);
   
    });

Программа выведет в консоль:

animal: Кот
name: Мурзик
color: Рыжий
eyes: Зелёные
wool: Короткошёрстный
breed: Беспородный

Используя $.each(), в jQuery можно перебирать не только свойства объекта, но и объекты в массиве. Покажем это на примере.

Пример 3. Создадим массив объектов students, содержащий фамилии, имена и возраст студентов. Выведем список студентов в консоль:

// Определим массив объектов students и свойства каждого объекта
var students= [
    { FirstName: "Андрей", LastName: "Кузнецов", Age: "19"},
    { FirstName: "Максим", LastName: "Смирнов", Age: "21"},
    { FirstName: "Алексей", LastName: "Курченко", Age: "23"},
    { FirstName: "Денис", LastName: "Рыбаков", Age: "20"},
    { FirstName: "Татьяна", LastName: "Афанасьева", Age: "18"}
  ]
$.each(students, function (index, value) {
    // index — индекс текущего объекта в массиве students
    // value — значение текущего объекта
    console.log("Имя: "+value.FirstName+"; Фамилия: "+value.LastName+"; Возраст: "+value.Age);
});

Результат работы программы:

Имя: Андрей; Фамилия: Кузнецов; Возраст: 19
Имя: Максим; Фамилия: Смирнов; Возраст: 21
Имя: Алексей; Фамилия: Курченко; Возраст: 23
Имя: Денис; Фамилия: Рыбаков; Возраст: 20
Имя: Татьяна; Фамилия: Афанасьева; Возраст: 18

Перебор элементов DOM

Функция $(selector).each() используется в jQuery для работы с DOM-элементами. Она упрощает работу с циклами и позволяет сократить количество возможных ошибок.

При вызове функция итерирует элементы DOM, входящие в объект jQuery. Она имеет следующий вид:

$(selector).each(callback)

Здесь selector — CSS-селектор, выбирающий элементы DOM;

callback — функция c двумя необязательными параметрами:

index — числовой индекс DOM-элемента, (от 0 до length − 1);

element — ссылка на элемент.

Кроме того, внутри функции callback можно употреблять ключевое слово this, также содержащее ссылку на элемент DOM.

Рассмотрим это на примерах.

Пример 4. Переберём элементы div и выведем в консоль индекс и класс каждого:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF—8">
    <meta http—equiv="X—UA—Compatible" content="IE=edge">
    <meta name="viewport" content="width=device—width, initial—scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
   
    <div class="block1">a b c d e f </div>
    <div class="block2">j h k l m n o p</div>
    <div class="block3">q r s t f v w</div>
    <script>
    // Перебрать элементы div на странице
    $('div').each(function (index, element) {
        // div — селектор функции each()
        // index — текущий индекс
        // element — ссылка на текущий элемент
     
    console.log('Индекс элемента: ' + index + '; класс элемента: ' +$(element).attr('class'));
   });    
    </script>  
</body>
</html>

В консоли увидим:

Индекс: 0; класс: block1
Индекс: 1; класс: block2
Индекс: 2; класс: block3

Если мы используем служебное слово this, то можем убрать параметр element. Это будет выглядеть так:

$('div').each(function (index)) {
  console.log('Индекс: ' + index + '; класс: ' + $(this).attr('class'));
}

break и continue в циклах с each()

В циклах jQuery с each() можно делать прерывание (аналог break), переходить к следующей итерации (аналог continue), организовывать вложенные циклы. Рассмотрим на примерах, как это сделать в программе.

Пример 5. Прерывание цикла. Чтобы остановить перебор элементов, применяют оператор return, возвращающий false.

Зададим массив и переберём его элементы. Из каждого элемента с индексом меньше 4 сформируем текстовый абзац и выведем его на экран. Когда индекс достигнет 4, прервём цикл:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF—8">
    <meta http—equiv="X—UA—Compatible" content="IE=edge">
    <meta name="viewport" content="width=device—width, initial—scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <script>
        var fruits = ["Яблоко", "Арбуз", "Апельсин", "Виноград", "Киви", "Груша"];
        $(function() {
            $.each(fruits, function(index, value) {
                if (index == 4) return false;
                $("body").append("<p>" + index + " " + value + "<p>");  
           });
        });
    </script>  
</body>
</html>

Программа выведет на экран:

0 Яблоко
1 Арбуз
2 Апельсин
3 Виноград

Пример 6. Переход на следующий шаг цикла (continue). Здесь прерывание операции делается также с помощью оператора jQuery return, но он возвращает true.

Рассмотрим массив из предыдущего примера. Выведем на экран элементы с индексом больше 4. Скрипт будет выглядеть так:

<script>
   
        var fruits = ["Яблоко", "Арбуз", "Апельсин", "Виноград", "Киви", "Груша"];   
        $(function() {
        $.each(fruits, function(index, value) {
            if (index < 4) return;
            $("body").append("<p>"+ index + " " + value + "<p>");   
          });
       });
     
</script>

На экране увидим:

4 Киви
5 Груша

Пример 7. Перебор вложенных структур. Зададим объект, свойства которого представляют собой массивы объектов. Переберём свойства и выведем их значения в консоль:

var smartphones = {
  'Apple': [
    {'name':'iPhone 14', 'memory':'128GB', 'color':'Black'},
    {'name':'iPhone 12', 'memory': '64GB', 'color':'Blue'}
  ],
  'Xiaomi': [
    {'name':'13T', 'memory': '256GB', 'color':'Silver'},
    {'name': '12T', 'memory': '256GB', 'color':'Black'}
  ],
};
$.each(smartphones,function(key, data) {
  console.log(key);
  $.each(data, function(index, value) {
    console.log(value['name'] + ', memory: '+ value['memory'] + ', color: '+ value['color']);
  });
});

Увидим в консоли:

Apple:
iPhone 14, memory: 128GB, color: Black
iPhone 12, memory: 64GB, color: Blue
Xiaomi:
13T, memory: 256GB, color: Silver
12T, memory: 256GB, color: Black

Выводы

Функции $.each() и $(selector).each() — это удобные инструменты для перебора массивов, объектов, элементов веб-страниц. С их помощью можно строить в программах простые и вложенные циклы, организовывать сложные конструкции. Подобно другим функциям jQuery, each() работает во всех браузерах, исключая устаревшие, вроде Internet Explorer 6.

Читайте также:

Больше интересного про код — в нашем телеграм-канале. Подписывайтесь!