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

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

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

Цикл each()

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

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

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

// массив, состоящий из 3 строк
var arr = ['Автомобиль','Грузовик','Автобус'];

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

// Результат (в консоли):
// Индекс: 0; Значение: Автомобиль
// Индекс: 1; Значение: Грузовик
// Индекс: 2; Значение: Автобус

В вышеприведённом коде функция each() используется для перебора массива. Функция имеет 2 обязательных параметра.

1. Первый параметр это сущность (массив или объект), элементы (свойства) которой необходимо перебрать
2. Второй параметр это функция обратного вызова, которая будет выполнена для каждого элемента. Она имеет 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 объектов. Отличие её использования заключается только в том, что параметры функции обратного вызова имеют другие значения. Первый параметр хранит название свойства объекта, а второй - значение этого свойства.

Перебор вложенных массивов

// Объект, состоящий из 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

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

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

По сути .each() является циклом, с помощью которого можно перебрать все найденные элементы. Ссылка на тот элемент, по которому сейчас проходит цикл будет лежать в this.

Можем просто воспользоваться этим this на чистом JavaScript, this.innerHTML - и вывести внутреннее содержимое наших элементов. Но лучше обернуть this в доллар jQuery таким образом - $(this), в этом случае мы сможем применять к нему все методы и цепочки jQuery.

В следующем примере мы получаем все элементы с классом .www и выводим на экран их содержимое. Это делается с помощью $('.www') мы получаем нужные нам элементы, затем с помощью .each(test) мы к каждому полученному элементу применяем функцию test. Она сначала применится к первому абзацу, потом ко второму, к третьему и так далее.

Внутри функции this будет указывать на тот элемент, к которому применяется функция test - сначала это будет первый элемент, потом второй, ну и так далее. С помощью такой конструкции $(this) мы вместо обычного this от JavaScript получим элемент jQuery и применим к нему метод .html(), который получит текст нашего элемента, дальше он просто алертом выведется на экран:

<p class="www">Текст абзаца 1.</p>
<p class="www">Текст абзаца 2.</p>
<p class="www">Текст абзаца 3.</p>
<p>Абзац.</p>

<script>
$('.www').each(test);
function test() {
    alert($(this).html());
}
<script>

Можно и с анонимными функциями:

<p class="www">Текст абзаца 1.</p>
<p class="www">Текст абзаца 2.</p>
<p class="www">Текст абзаца 3.</p>
<p>Абзац.</p>

<script>
$('.www').each(function() {
    alert($(this).html());
});
<script>