Работа з метадам 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);
});