Bekerja dengan Metode each di jQuery

Ketika kita memiliki sekelompok elemen yang diperoleh dengan menggunakan jQuery, kita dapat melakukan perubahan padanya hanya untuk semua elemen secara bersamaan.

Sebagai contoh, jika kita ingin mengubah teks semua paragraf yang ditemukan - kita tidak akan bisa membuatnya berbeda.

Dalam hal ini, metode khusus each dapat membantu, yang memungkinkan untuk menerapkan suatu fungsi untuk semua elemen dalam set jQuery. Di dalam fungsi ini kita dapat memisahkan elemen dan melakukan hal yang berbeda pada masing-masing elemen.

Pada dasarnya each adalah sebuah loop, yang dapat digunakan untuk mengulangi semua elemen yang ditemukan. Tautan ke elemen yang sedang di-loop akan berada di this.

Kita dapat menggunakan this ini dalam JavaScript murni, seperti yang kita lakukan sebelumnya, contohnya, seperti ini - this.innerHTML - dan menampilkan isi internal elemen kita. Tetapi lebih baik untuk membungkus this dalam jQuery dollar seperti ini - $(this) - dalam hal ini kita dapat menerapkan semua metode dan chain jQuery padanya.

Mari kita lihat kode HTML berikut:

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

Dalam contoh ini, kita harus mendapatkan semua elemen dengan kelas www dan menampilkan isi mereka di layar. Cara melakukannya: dengan $('.www') kita mendapatkan elemen yang kita butuhkan, kemudian dengan each(test) kita menerapkan fungsi test ke setiap elemen yang diperoleh. Pertama-tama itu akan diterapkan pada paragraf pertama, lalu yang kedua, yang ketiga, dan seterusnya.

Di dalam fungsi, this akan menunjuk pada elemen yang menjadi sasaran fungsi test - pertama-tama ini akan menjadi elemen pertama, lalu yang kedua, dan seterusnya. Dengan konstruksi seperti $(this) ini, alih-alih this biasa dari JavaScript, kita akan mendapatkan elemen jQuery dan menerapkan metode html padanya, yang akan mendapatkan teks elemen kita. Kemudian teks itu akan ditampilkan di layar:

/*
	Nama fungsi test ditulis tanpa tanda kutip dan (),
	karena kita membutuhkan kodenya, bukan hasilnya:
*/

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

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

Untuk menyelesaikan tugas ini, fungsi anonim juga dapat digunakan - ini paling sering dilakukan:

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

Kita juga dapat meneruskan fungsi callback dengan parameter ke metode each.

Mari dalam contoh berikutnya tambahkan di akhir semua li pada halaman nomor urutnya. Sekarang ke fungsi anonim kita kita akan meneruskan nomor elemen dan elemen itu sendiri:

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

Dan sekarang alih-alih elem, gunakan this:

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

Ubah isi semua li menjadi nomor urutnya.