Помните – jQuery это просто JavaScript. Не думайте, что он способен исправить ваш плохой код.
Это значит, что если мы должны оптимизировать такие вещи, как предложения for из JavaScript, то же самое касается метода jQuery each. А почему нет? Это просто вспомогательный метод, который затем «за кулисами» создает предложение for.
// источник метода jQuery each
each: function( object, callback, args ) {
var name, i = 0,
length = object.length,
isObj = length === undefined || jQuery.isFunction(object);
if ( args ) {
if ( isObj ) {
for ( name in object ) {
if ( callback.apply( object[ name ], args ) === false ) {
break;
}
}
} else {
for ( ; i < length; ) {
if ( callback.apply( object[ i++ ], args ) === false ) {
break;
}
}
}
// специальный быстрый случай самого обычного использования each
} else {
if ( isObj ) {
for ( name in object ) {
if ( callback.call( object[ name ], name, object[ name ] ) === false ) {
break;
}
}
} else {
for ( var value = object[0];
i < length && callback.call( value, i, value ) !== false; value = object[++i] ) {}
}
}
return object;
}
Ужасно
someDivs.each(function() {
$('#anotherDiv')[0].innerHTML += $(this).text();
});
Ищет anotherDiv в каждой итерации цикла
Дважды подхватывает свойство innerHTML
Создает новый объект jQuery только для того, чтобы иметь доступ к тексту элемента.
Гораздо лучше
var someDivs = $('#container').find('.someDivs'),
contents = [];
someDivs.each(function() {
contents.push( this.innerHTML );
});
$('#anotherDiv').html( contents.join('') );
Таким образом, единственное действие, которое мы выполняем внутри метода each (for) – это добавление в массив нового ключа…в противоположность запросу к DOM, использованию дважды свойства innerHTML элемента и т.д.
Этот совет больше касается вообще JavaScript, чем конкретно jQuery. Главное помнить, что jQuery не исправляет плохой код.
Фрагменты документа
В подобных ситуациях имеется альтернатива– использование фрагментов документа.
var someUls = $('#container').find('.someUls'),
frag = document.createDocumentFragment(),
li;
someUls.each(function() {
li = document.createElement('li');
li.appendChild( document.createTextNode(this.innerHTML) );
frag.appendChild(li);
});
$('#anotherUl')[0].appendChild( frag );
Суть в том, что существует множество способов выполнения таких простых задач, как эта, и каждый имеет свои преимущества и недостатки в плане производительности от браузера к браузеру. Чем больше вы придерживаетесь jQuery и изучаете JavaScript, тем чаще можете заметить, что обращаетесь к встроенным свойствам и методам JavaScript. Если так, то это отлично!
jQuery обеспечивает поразительный уровень абстракции, и его преимуществами вы должны пользоваться, но это не значит, что вас этими методами заставляют пользоваться. Например, в вышеуказанном фрагменте мы употребляем метод jQuery each. Если вы предпочтете использовать вместо него предложение for или while, тоже получится хорошо!
Наряду со сказанным помните о том, что разработчики jQuery тщательно оптимизировали эту библиотеку. Споры вокруг jQuery each() против "родного" предложения for глупы и банальны. Если вы в своем проекте используете jQuery, сэкономьте время и пользуйтесь его собственными вспомогательными методами. Они и созданы для этого!