jQuery-da each metodi bilan ishlash

Bizda jQuery yordamida olingan elementlar guruhi bo'lganda, biz ularga o'zgartirishlarni faqat barcha elementlar uchun bir vaqtning o'zida kiritishimiz mumkin.

Masalan, agar biz topilgan barcha abzaslarning matnini o'zgartirmoqchi bo'lsak - uni har xil qilish imkoni bo'lmaydi.

Bunday holatda bizga each maxsus metodi yordam beradi, u jQuery to'plamidagi barcha elementlarga qandaydir funktsiyani qo'llash imkonini beradi. Bunda, ushbu funktsiya ichida biz elementlarni ajratishimiz va ularning har biri bilan har xil harakat qilishimiz mumkin.

Aslida each tsikl bo'lib, uning yordamida topilgan barcha elementlarni aylantirish mumkin. Hozirgi vaqtda tsikl o'tayotgan elementga havola this da joylashadi.

Biz shunchaki ushbu this dan sof JavaScript-da foydalanishimiz mumkin, buni biz ilgari qilganmiz, masalan, shunday - this.innerHTML - va elementlarimizning ichki mazmunini chiqarish. Lekin this ni jQuery dollari bilan shunday o'rab chiqish yaxshiroq - $(this) - bu holda biz unga jQuery-ning barcha metodlari va zanjirlarini qo'llashimiz mumkin.

Keling, quyidagi HTML kodni ko'rib chiqaylik:

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

Ushbu misolda biz www klassiga ega bo'lgan barcha elementlarni olishimiz va ularning mazmunini ekranda chiqarishimiz kerak. Buni qanday qilinadi: $('.www') yordamida biz kerakli elementlarni olamiz, keyin each(test) yordamida biz har bir olingan elementga test funktsiyasini qo'llaymiz. U avval birinchi abzasga qo'llaniladi, keyin ikkinchisiga, uchinchisiga va hokazo.

Funktsiya ichida this test funktsiyasi qo'llanilayotgan elementni ko'rsatadi - avval bu birinchi element bo'ladi, keyin ikkinchi va hokazo. Bunday konstruksiya $(this) yordamida biz oddiy this o'rniga JavaScript-dan jQuery elementini olamiz va unga html metodini qo'llaymiz, bu bizning elementimizning matnini oladi. Keyin esa u shunchaki ekranda chiqariladi:

/*
	Test funktsiyasining nomini tirnoqsiz va () siz yozamiz,
	chunki bizga uning kodi kerak, natijasi emas:
*/

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

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

Ushbu vazifani hal qilish uchun anonim funktsiyalarni ham qo'llash mumkin - buni ko'pincha qilishadi:

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

Shuningdek, biz each metodiga parametrli callback-funktsiyani uzatishimiz mumkin.

Keling, keyingi misolda sahifadagi barcha li larning oxiriga ularning tartib raqamini qo'shaylik. Endi bizning anonim funktsiyamizga element raqami va elementning o'zini uzatamiz:

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

Endi esa elem o'rniga this dan foydalanamiz:

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

Barcha li larning mazmunini ularning tartib raqamiga almashtiring.