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