this
ialah selektor jalan pintas untuk menyatakan "elemen ini" atau "elemen yang sama". Sebagai contoh, Anda mencoba menulis aba-aba menyerupai ini untuk menjalankan efek animasi pada sejumlah gambar dalam satu halaman. Anda berharap biar ketika salah satu elemen <img>
diklik, maka elemen tersebut akan menghilang dengan efek .fadeOut()
:
$('img').click(function() { $('img').fadeOut(); });
Kode di atas sangat tidak benar dan akan menjadikan dilema besar ketika Anda berhadapan dengan lebih dari satu elemen <img>
. Kita berharap bahwa aba-aba di atas akan menghilangkan elemen <img>
hanya pada gambar yang diklik saja. Tapi pada kenyataannya, ketika salah satu gambar diklik, gambar yang lain juga akan ikut menghilang.
Gunakan Selektor $(this)
Kode di atas tidak layak digunakan alasannya ialah selektor yang mengarahkan kepada elemen terpicu/target (dalam hal ini ialah elemen yang dikenai efek .fadeOut()
) tidak spesifik. Menggunakan selektor this
sanggup mencegah penyeleksian secara massal pada elemen:
$('img').click(function() { $(this).fadeOut(); });
Fungsi jQuery di atas hanya akan menghilangkan elemen yang diklik saja dan tidak akan mengganggu elemen sejenis yang lainnya.
Menyeleksi Anak Elemen dari Elemen "Ini"
Untuk menyeleksi anak elemen dari elemen "ini", Anda cukup memisahkan selektor dengan tanda koma lalu melanjutkannya dengan selektor this
:
$('#nav li').click(function() { $("ul", this).slideDown(); });
$('ul', this)
berarti "Elemen ul
yang berada di dalam elemen #nav li
yang diklik".