jQuery - each

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

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

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

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

Цикл each (jQuery.each)

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

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

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

  1. Переберём все элементы массива (array).jQuery - each 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. Переберём все свойства объекта.jQuery - each object (перебор объекта)
    // объект 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 (пременяется только к выбранным элементам):

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


   JavaScript и jQuery 0    5725 +1

Комментарии (17)

  1. Сергей # 0
    Александр, добрый день.
    Посоветуйте, что предпринять.
    В ответ на аякс-запрос из базы данных возвращается массив объектов:
    0:{id: "1", title: "title 1", text: "text 1"}
    id:"1"
    text:"text 1"
    title:"title 1"
    1:{id: "2", title: "title 2", text: "text 2"}
    id:"2"
    text:"text 2"
    title:"title 2"	
    **************
    
    В функции success, как я понял из данной статьи, нужно дважды использовать each — применив к двум принятым объектам и к каждой паре «ключ-значение» объекта…
    Пишу вот такой код:
    success: function(response) {
      $.each(response, function(key, value){
        $.each(value, function(title, text){
          console.log(title);
          console.log(text);
        })
      });
    },
    **********,
    
    В консоли появляется следующая ошибка:
    "Uncaught ReferenceError: json_encode is not defined".
    
    Подскажите пожалуйста, что не так?
    скрин: itchief.ru/assets/uploadify/1/8/b/18b202c1b13bb78f48c6651be2ec71cc.jpg
    1. Александр Мальцев # 0
      Ошибка на 21 строчке в файле script.js, в которой происходит обращение к json_encode. А этой функции в JavaScript нет. Необходимо открыть файл script.js, перейти на 21 строчку и посмотреть что там за код…
      1. Сергей # 0
        Александр, json_encode у меня в php файле. Он ведь только перегоняет массив в json-формат.
        в script.js этой функции нет.
        по поводу формата — валидатор json ругнулся на него (на формат), я добавил в функцию json_encode константу JSON_FORCE_OBJECT и теперь ответ такой —
        {«0»:{«title»:«title 1»,«text»:«text 1»},«1»:{«title»:«title 2»,«text»:«text 2»}}.

        попробовал обработать эти данные функцией forEach —
        пробую теперь обработать эти данные с помощью each — вываливается вот такая ошибка- получаю ошибку — Uncaught TypeError: response.forEach is not a function.

        если прибегаю к each — TypeError: invalid 'in' operand a
        ////////////////////
        второй день бьюсь об эту стену.
        уже штукатурка сыпется.
      2. Александр Мальцев # 0
        Тут ошибка не в each, а с форматом JSON. Вы как-то некорректно посылаете данные на сервер. Т.к. функции json_encode в JavaScript нет, это функция языка PHP. В JavaScript другие функции: JSON.stringify (для преобразования объекта в JSON строку) и JSON.parse (для преобразования JSON строки в объект JavaScript).
        1. Сергей # 0
          еще дополню…
          я убрал запрос id и оставил только выборку title, text.
          ответ приходит вот такой —
          [{«title»:«title 1»,«text»:«text 1»},{«title»:«title 2»,«text»:«text 2»}]
          формат, как мне кажется, вполне корректный.
          или нет?
          1. Александр Мальцев # 0
            Если id не будете выводить на страницу, то можно его и не отправлять. И объём данных будет меньше.
          2. Сергей # 0
            а посылается запрос вот так:

            $.ajax({
            url: «ajax.php»,
            type: «POST»,
            data: {
            offset: offset
            },
            ......
            и т.д.

            переменная offset=2 (т.е. количество необходимых статей для LIMIT-а в sql запросе.
            и эти две статьи выбираются, и через echo json_encode($arr); возвращаются…
            но вот что с ними потом сделать, чтобы этот title и text можно было закидывать в верстку… ума не приложу.
            ну до верстки еще далеко… консоль не показывает этих данных и я понимаю, что уже на этом этапе у меня какой то косяк.
            1. Александр Мальцев # 0
              Попробуй добавить перед each:
              var response = JSON.parse(response);
              
              1. Сергей # 0
                Александр, вы мой спаситель!!!
                эта строчка помогла.
                *******
                Спасибо вам большое.
                Я уже было отчаялся)
            2. Сергей # 0
              Александр, я из php-файла отправил ответ вот в таком виде:
              echo json_encode($arr);
              exit();


              success, по идее, принимает читабельный для него формат json.
              только теперь я не пойму как мне разобрать эту массив объектов (я ведь правильно назвал то, что вернулось в ответ на запрос?) строку, чтобы потом использовать эти данные… ну, наверное нечто такое:
              $('#content').append('titlet')
              $('#content').append('text')
              1. Александр Мальцев # 0
                Вы уже сделали это выше с помощью each. Только сначала заведите переменную, например output, в которую будете складывать результирующий HTML-код и когда вы его полностью построите, то вставите на страницу.
                var output = '';
                $.each(response, function(key, value){
                  $.each(value, function(title, text){
                    output += '<h3>'+title+'</h3>';
                    output += '<p>'+text+'</p>';
                  })
                });
                $('#content').append(output);
                
                1. Сергей # 0
                  А вот этого вчера не заметил…
                  Здорово. Я сделал глупый год, а ваш мне помог довести задуманное до ума.

                  Единственное, что пришлось сделать, убрать один из each-ей, потому что в output попадали и ключи, которые потом выводились в диве #content (в моем случае — #info).

                  вот тот вариант, который выводит так, как нужно:
                  success: function (response) {
                  var output = '';
                  $.each(response, function(key, value){
                  output += ''+value.title+'';
                  output += ''+value.text+'';
                  );
                  $('#info').append(output);
                  }

                  ********************
                  Александр, еще раз спасибо вам.
          3. Александр # 0
            А как прменить это к стилям?
            Например, есть перечень цветов:
            rgba(204, 204, 255, 1)
            rgba(255, 204, 255, 1)
            rgba(204, 153, 255, 1)
            rgba(102, 51, 255, 1)
            rgba(204, 51, 255, 1)
            rgba(255, 255, 255, 1)

            И есть условно говоря, такая разметка:

            <html>
            
            <head>
              <title>Untitled</title>
            <style>
            .textlogo {
            	/*font-family: 'Roboto Condensed', sans-serif;
            	font-weight: 300;
            	font-style: italic;*/
            	display: table-cell;
            	border: 0px none;
            	height: 100%;
            	vertical-align: middle;
            	font-size: 24px;
            	color: white;
            	position: relative;
            	float: left;
            	margin-top:15px;
            }
            .textlogo:hover {
            	color: rgba(255, 153, 0, 1);
            }
            </style>
            </head>
            
            <body style="background:gray;">
                <a href="#"><div class="textlogo">TEXTLOGO</div></a>
            </body>
            
            </html>
            
            Нужно, чтобы при загрузке страницы или обновлении страницы свойство color у .textlogo — устанавливалось из случайно выбранного цвета из перечня.
            1. Александр Мальцев # 0
              each используется для перебора. А в Вашей задаче ничего перебирать не надо, необходимо только выбрать случайный цвет из списка.
              Это можно сделать так:
              <script>
              // массив цветов
              var $colors = [
                'rgba(204, 204, 255, 1)',
                'rgba(255, 204, 255, 1)',
                'rgba(204, 153, 255, 1)',
                'rgba(102, 51, 255, 1)',
                'rgba(204, 51, 255, 1)',
                'rgba(255, 255, 255, 1)'
              ];
              // случайный цвет
              var $randomColor = Math.round( Math.random() * ($colors.length-1) );
              // исходный цвет
              $sourceColor = 'white';
              // после загрузки страницы
              $(function(){
                // при hover
                $('.textlogo').hover(
                  function() {
                    $(this).css('color',$colors[$randomColor]);
                  },
                  function() {
                    $(this).css('color',$sourceColor);
                  }
                );
              });
              </script>
              
              1. Александр # 0
                Да, только применяет случайный цвет к .hover, а хотелось бы к элементу без .hover
                1. Александр Мальцев # 0
                  Тогда будет ещё проще (может быть кому нибудь пригодится).
                  // массив цветов
                  var $colors = [
                    'rgba(204, 204, 255, 1)',
                    'rgba(255, 204, 255, 1)',
                    'rgba(204, 153, 255, 1)',
                    'rgba(102, 51, 255, 1)',
                    'rgba(204, 51, 255, 1)',
                    'rgba(255, 255, 255, 1)'
                  ];
                  // случайный цвет
                  var $randomColor = Math.round( Math.random() * ($colors.length-1) );
                  // после загрузки страницы
                  $(function(){
                    $('.textlogo').css('color',$colors[$randomColor]);
                  });
                  
                  1. Александр # 0
                    Вопрос снят.

              Вы должны авторизоваться, чтобы оставлять комментарии.