jQueryдеги each методу менен иштөө

Бизде jQuery колдонуп алынган элементтердин тобу болгондо, биз аларга өзгөртүүлөрдү бардык элементтерге бир эле учурда гана киргизе алабыз.

Мисалы, эгерде биз табылган бардык абзацтардын текстин өзгөртүүнү кааласак - аны ар түрдүү кылууга мүмкүн болбойт.

Бул учурда бизге each деген атайын метод жардам берет, ал jQuery топтомунун бардык элементтерине каалаган функцияны колдонууга мүмкүндүк берет. Бул функциянын ичинде биз элементтерди бөлүп, алардын ар бири менен ар түрдүү аракет кыла алабыз.

Негизинен each цикл болуп саналат, анын жардамы менен табылган бардык элементтерди аралап чыгууга болот. Азыркы цикл иштеп жаткан элементке шилтеме this-те жатат.

Биз жөн гана бул this-ти таза JavaScriptте колдонсок болот, биз мурун кылгандай, мисалы, ушундай - this.innerHTML - жана биздин элементтердин ички мазмунун чыгарсак болот. Бирок this-ти jQuery долларына ушундайча ороп коюу жакшыраак - $(this) - бул учурда биз ага jQueryдин бардык методдорун жана тизмектерин колдонсо болот.

Келгиле, төмөнкү HTML кодду карап көрөлү:

<p class="www">текст</p>
<p class="www">текст</p>
<p class="www">текст</p>
<p>текст</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 элементтеринин мазмунун алардын тартиптүү номерине алмаштырыңыз.