jQuery-де each әдісімен жұмыс

Бізде 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 элементтерінің мазмұнын олардың реттік нөміріне ауыстырыңыз.