Перебор массивов, объектов, элементов, jQuery

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

1. jQuery.each универсальная функция jQuery с помощью которой можно осуществить перебор элементов массива или объекта
2. each метод который применяется к набору элементов для организации цикла по ним

Цикл jQuery.each перебор массива или объекта

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

Выполним переберор всех элементов массива:

// массив
var arr = ["Автомобиль", "Грузовик", "Автобус"];
// действия, которые будут выполняться для каждого элемента массива. index это текущий индекс элемента массива (число), value это значение текущего элемента массива
$.each(arr, function (index, value) {
  //выведем индекс и значение массива в консоль
  console.log("Индекс: " + index + "; Значение: " + value);
});

Выполним переберор всех элементов объекта:

// объект
var smartphone = {
  name: "LG G5 se",
  year: "2016",
  "screen-size": "5.3",
  "screen-resolution": "2560 x 1440",
  os: "Android 6.0 (Marshmallow)",
};
// действия, которые будут выполняться для каждого свойства объекта. key текущее имя свойства массива, value значение текущего свойства объекта
$.each(smartphone, function (key, value) {
  // выведем имя свойства и его значение в консоль
  console.log("Свойство: " + key + "; Значение: " + value);
});

Цикл each перебор набора элементов

Синтаксис метода each, пременяется только к выбранным элементам:

// function - функция, которая будет выполнена для каждого элемента текущего объекта
.each(function);

Переберём элементы 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 текущий индекс итерации, данное значение является числом. element содержит DOM-ссылку на текущий элемент
    console.log('Индекс элемента div: ' + index + '; id элемента = ' + $(element).attr('id'));
  });
});
</script>

Выведем в консоль значение атрибута href для всех элементов а на странице:

$('a').each(function() {
  console.log($(this).attr('href'));
});

Организация цикла по элементам DOM, имеющих класс name:

<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());
});
</script>

Прервать цыкл break

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

// массив, состоящий из 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);
  }
});

Перейти к следующей итерации цыкла 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());