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

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

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

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

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

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

Давайте рассмотрим следующий 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`, который получит текст нашего элемента. Ну, а дальше он просто алертом выведется на экран:

`/* Имя функции test пишем без кавычек и (), так как нам нужен ее код, а не результат: */ $('.www').each(test); function test() { alert($(this).html()); }`

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

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

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

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

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

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

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

Поменяйте содержимое всех `li` на их порядковый номер.

←→
↑