jQuery да each метод ишлаш

Бизда jQuery ёрдамида олинган элементлар гурухи бўлганда, биз уларга ўзгартиришларни фақат барча элементлар учун бир вақтда киритишимиз mumkin.

Мисол учун, агар биз топилган барча абзацларнинг матнини ўзгартирмоқчи бўлсак, уни har xil qilish imkoniyati boʻlmaydi.

Бундай ҳолда бизга each maxsus метеди ёрдам беради, у jQuery тўпламидаги барча элементлар учун қандайдир функцияни қўллашга имкон беради. Бунда биз ushbu функция ичида элементларни ажратиб, уларнинг ҳар бири билан har xil harakat qilishimiz mumkin.

Аслода each цикл бўлиб, унинг ёрдамида топилган барча элементларни айланиб чиқиш мумкин. Цикл ҳозир айланиб ўтayotgan элементга havola this да joylashган бўлади.

Биз бу this ни oddiy JavaScript да, биз илгари қилганимиздек, фойдаланишимиз мумкин, мисол учун, шундай - this.innerHTML - ва элементларимизнинг ички мазмунини чиқаришимиз мумкин. Лекин this ни шундай қилиб jQuery долларига ўраб olish - $(this) - яхшироқ, бунда биз унга jQuery нинг барча методлари ва zanjirlarini qoʻllashimiz mumkin.

Кeling, quyidagi HTML kodini koʻrib chiqaylik:

<p class="www">matn</p>
<p class="www">matn</p>
<p class="www">matn</p>
<p>matn</p>

Бу мисолда биз www классли барча элементларни олишимиз ва уларнинг мазмунини экранга чиқаришимиз керак. Бу қандай қилинади: $('.www') ёрдамида биз керакли элементларимизни оламиз, сўнгра each(test) ёрдамида биз har bir олинган элементга test функциясини қўллаймиз. У аввал биринчи абзацга қўлланилади, сўнгра иккинчига, учинчига ва ҳоказо.

Функция ичида this шу функция қўлланилаётган элементни кўрсатади - аввал бу биринчи элемент бўлади, сўнгра иккинчи, ва ҳоказо. Bunday конструкция $(this) ёрдамида биз oddiy this ўрнига JavaScript дан jQuery элементini olamiz ва унга html методini қўллаймиз, у элементимизнинг матнини олади. Ну, ва сўнгра у oddiygina экранга чиқарилади:

/*
	Test функциясининг номини qoʻshtirnoqsiz va () siz yozamiz,
	чунки бизга унинг коди керак, бўлмаса натижаси эмас:
*/

$('.www').each(test);

function test() {
	alert($(this).html());
}

Бу вазифани ҳал қилиш учун аноним функцияларни ҳам қўллаш мумкин - бундай қилиш кўпроқ учрайди:

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

Шунингдек, биз each методуга параметрлар билан callback-функциясини ўтказа оламиз.

Кeling, keyingi misolda sahifadagi барча li ларнинг охирига уларнинг tartib raqamini qoʻshamiz. Endi бизнинг аноним функциямизга элементнинг номери ва elementning oʻzini oʻtkazamiz:

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

Энди elem ўрнига this ни ишлатамиз:

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

Барча li ларнинг мазмунини уларнинг tartib raqamiga almashtiring.