Работа с методом 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 на их
порядковый номер.