# 10: Iterasi Eksplisit vs Implisit - Trik CSS

Anonim

Video konsep lain! Ini adalah "hanya satu dari hal itu" yang perlu Anda pahami di jQuery. Ini sebenarnya agak unik untuk jQuery, karena perpustakaan JavaScript populer lainnya di masa lalu belum melakukannya dengan cara ini.

Kami sudah membahas selektor cukup banyak. Misalnya, Anda sudah tahu bahwa $("p")akan memilih semua paragraf di halaman. Bukan hanya yang pertama atau yang acak, semuanya. Anda dapat dengan mudah membayangkan mungkin ada banyak dari ini di halaman. Sekarang bayangkan apa yang terjadi jika Anda melakukannya:

$("p").hide();

Semuanya disembunyikan, bukan? Baik. Bukan yang pertama atau yang acak, semuanya. Itu iterasi implisit . Di balik layar, jQuery secara otomatis mengulang seluruh rangkaian elemen yang ditemukannya, dan menjalankan metode yang Anda pilih. Kami tidak benar-benar perlu menulis loop sendiri untuk melakukan ini. Tampaknya cukup jelas jika Anda pengantar JavaScript adalah jQuery, tetapi banyak perpustakaan di masa lalu mengharuskan Anda untuk mengulang koleksi elemen Anda sendiri.

Jika mau, Anda masih dapat menulis loop sendiri. Itu mungkin akan terlihat seperti ini, menggunakan metode perulangan jQuery:

$("p").each(function() ( $(this).hide(); ));

Itu hampir sama. Belum tentu, tapi Anda bisa. Itu iterasi eksplisit .

Terkadang Anda perlu melakukan iterasi eksplisit. Pada dasarnya, jika kita perlu mengakses nilai dari thisdan melakukan sesuatu yang istimewa dengannya, kita memerlukan konstruksi loop kita sendiri untuk bekerja dengannya.

Contoh dalam screencast ini adalah menghitung karakter dalam item daftar dan menambahkannya ke akhir string. Kami membutuhkan iterasi eksplisit untuk itu.

Lihat Pena 4b53b9f55662d0d26339e18277500eee oleh Chris Coyier (@chriscoyier) di CodePen

Kami menggunakan metode each () jQuery di sini yang sempurna untuk apa yang kami butuhkan. Sedikit berguna yang dilakukannya bagi kami adalah memberi kami penghitung indeks nol setiap iterasi yang dapat kami akses jika diperlukan.

$(".there-are-three-of-me").each(function(i) ( console.log(i); )); // 0 // 1 // 2