Итерация по Объектам jQuery - .each ()

Для итерации по коллекциям jQuery следует использовать метод .each().

.each()

Метод .each() применяется непосредственно на коллекции jQuery. Он выполняет итерацию по каждому соответствующему элементу в коллекции и выполняет обратный вызов на этом объекте. Индекс текущего элемента в пределах коллекции передается как параметр обратному вызову. Значение (элемент DOM в этом случае) также передается, но обратный вызов запускается внутри контекста текущего сопоставленного элемента, так что ключевое слово this указывает на текущий элемент, как ожидается в других обратных вызовах jQuery.

Например, пусть имеется следующая разметка:

<ul>
    <li><a href="#">Ссылка 1</a></li>
    <li><a href="#">Ссылка 2</a></li>
    <li><a href="#">Ссылка 3</a></li>
</ul>

.each() может использоваться например так:

$( "li" ).each( function( index, element ){
    console.log( $( this ).text() );
});
 
// Выводит следующее:
// Ссылка 1
// Ссылка 2
// Ссылка 3

Второй Параметр

Часто возникает вопрос, "Если this - это элемент, почему второй параметр элемента DOM передается обратному вызову?"

Или непреднамеренно или по неосторожности, контекст выполнения может измениться. Постоянно используя ключевое слово this, легко закончить тем, чтобы смутить себя или других разработчиков, читающих код. Даже если контекст выполнения остается тем же самым, вероятно будет более читаемым использование второго параметра в качестве именованного параметра. Например:

$( "li" ).each( function( index, listItem ) {
 
    this === listItem; // истина
 
    // Только для примера. Вы вероятно не должны так делать
    //   call $.ajax() в цикле.
    $.ajax({
        success: function( data ) {
            // Контекст изменился.
            // Ключевое слово "this" более не ссылается на listItem.
            this !== listItem; // истина
        }
    });
 
});

Иногда .each() Не Нужен

Многие методы jQuery неявно выполняют итерации по всей коллекции, применяя свое поведение к каждому соответствующему элементу. Например, это является ненужным:

$( "li" ).each( function( index, el ) {
    $( el ).addClass( "newClass" );
});

Поскольку и это работает:

$( "li" ).addClass( "newClass" );

Каждому <li> в документе будет добавлен класс "newClass".

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

Это не будет работать:

// Не работает:
$( "input" ).val( $( this ).val() + "%" );
 
// .val() не изменяет контекст выполнения,
//    так что this === window

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

$( "input" ).each( function( i, el ) {
    var elem = $( el );
    elem.val( elem.val() + "%" );
});

Ниже приведен список методов, которые требуют .each():

• .attr() (получатель)
• .css() (получатель)
• .data() (получатель)
• .height() (получатель)
• .html() (получатель)
• .innerHeight()
• .innerWidth()
• .offset() (получатель)
• .outerHeight()
• .outerWidth()
• .position()
• .prop() (получатель)
• .scrollLeft() (получатель)
• .scrollTop() (получатель)
• .val() (получатель)
• .width() (получатель)

Отметьте, что в большинстве случаев, получатели возвращают результат из первого элемента в коллекции jQuery, в то время как установщики действует по всей коллекции сопоставленных элементов. Исключение к этому - .text(), где получатель возвратит соединенную строку текста из всех сопоставленных элементов.

В дополнение к установке значений, атрибутов, свойств, CSS, методы "установщиков" вставки DOM (то есть .text() и .html()) принимают анонимные функции обратного вызова, которые применяются к каждому элементу в наборе соответствия. Параметры, которые передаются к обратному вызову, - индекс сопоставленного элемента внутри набора и результат подписи 'получателя' метода.

Например, эти фрагменты кода эквивалентны:

$( "input" ).each( function( i, el ) {
    var elem = $( el );
    elem.val( elem.val() + "%" );
});
 
$( "input" ).val(function( index, value ) {
    return value + "%";
});

Другая вещь, которую следует иметь в виду с этой неявной итерацией, состоит в том что методы обхода такие как .children() или .parent() будет действовать на каждом соответствующем элементе в соединении, возвращающем объединенную коллекцию всех дочерних элементов или родительских узлов.

Далее: jQuery методы $.map() и .map()