Работа с методом each в jQuery

Когда у нас есть группа элементов, полученных с помощью jQuery, мы можем вносить в них изменения только для всех элементов одновременно.

К примеру, если мы хотим сменить текст всех найденных абзацев - у нас не получится сделать его разным.

В этом случае нам поможет специальный метод each, который позволяет применить какую-либо функцию для всех элементов набора jQuery. При этом внутри этой функции мы сможем разделить элементы и поступить по-разному с каждым из них.

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

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

Давайте рассмотрим следующий HTML код:

html<p class="www">text</p>
<p class="www">text</p>
<p class="www">text</p>
<p>text</p>

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

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

javascript/*
  Имя функции test пишем без кавычек и (),
  так как нам нужен ее код, а не результат:
*/

$('.www').each(test);

function test() {
  alert($(this).html());
}

Для решения данной задачи можно применять и анонимные функции - так делают чаще всего:

javascript$('.www').each(function() {
  alert($(this).html());
});

Также мы можем передать методу each callback-функию с параметрами.

Давайте в следующем примере добавим в конец всем li на странице их порядковый номер. Теперь в нашу анонимную функцию мы будем передавать номер элемента и сам элемент:

javascript$('li').each(function (index, elem) {
  $(elem).append(index);
});

А теперь вместо elem используем this:

javascript$('li').each(function (index) {
  $(this).append(index);
});