Penggunaan Kaedah each dalam jQuery

Apabila kita mempunyai sekumpulan elemen yang diperoleh menggunakan jQuery, kita hanya boleh membuat perubahan kepada semua elemen tersebut secara serentak.

Sebagai contoh, jika kita ingin menukar teks semua perenggan yang ditemui - kita tidak boleh menjadikannya berbeza.

Dalam kes ini, kaedah khas each boleh membantu, yang membolehkan kita menggunakan sesuatu fungsi untuk semua elemen dalam set jQuery. Di dalam fungsi ini, kita boleh membezakan elemen-elemen tersebut dan bertindak secara berbeza dengan setiap satunya.

Pada dasarnya each ialah satu gelung, yang boleh digunakan untuk mengulangi semua elemen yang ditemui. Rujukan kepada elemen yang sedang diproses oleh gelung akan berada dalam this.

Kita boleh hanya menggunakan this ini dalam JavaScript tulen, seperti yang kita lakukan sebelum ini, contohnya, seperti ini - this.innerHTML - dan memaparkan kandungan dalaman elemen kita. Tetapi lebih baik untuk membungkus this dalam jQuery dollar seperti ini - $(this) - dalam kes ini, kita boleh menggunakan semua kaedah dan rantaian jQuery padanya.

Mari kita lihat kod HTML berikut:

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

Dalam contoh ini, kita perlu mendapatkan semua elemen dengan kelas www dan memaparkan kandungannya. Cara melakukannya: dengan $('.www') kita mendapat elemen yang kita perlukan, kemudian dengan each(test) kita gunakan fungsi test pada setiap elemen yang diperoleh. Ia akan digunakan pada perenggan pertama terlebih dahulu, kemudian pada yang kedua, yang ketiga dan seterusnya.

Di dalam fungsi, this akan menunjuk kepada elemen yang sedang digunakan oleh fungsi test - pertama ia akan menjadi elemen pertama, kemudian yang kedua, dan seterusnya. Dengan menggunakan binaan seperti $(this), kita akan mendapat elemen jQuery dan menggunakan kaedah html padanya, yang akan mendapatkan teks elemen kita. Kemudian, ia hanya akan dipaparkan:

/*
	Nama fungsi test ditulis tanpa tanda petik dan (),
	kerana kita memerlukan kodnya, bukan hasilnya:
*/

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

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

Untuk menyelesaikan tugas ini, fungsi tanpa nama juga boleh digunakan - ini lebih kerap dilakukan:

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

Kita juga boleh menghantar fungsi callback dengan parameter kepada kaedah each.

Mari dalam contoh seterusnya tambahkan nombor urutan pada akhir semua li di halaman. Sekarang kita akan menghantar nombor elemen dan elemen itu sendiri kepada fungsi tanpa nama kita:

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

Dan sekarang gantikan elem dengan this:

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

Tukar kandungan semua li kepada nombor urutan mereka.