jQuery $(this)?

this adalah selektor jalan pintas untuk menyatakan "elemen ini" atau "elemen yang sama". Sebagai contoh, Anda mencoba menulis kode seperti ini untuk menjalankan efek animasi pada sejumlah gambar dalam satu halaman. Anda berharap agar 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 menimbulkan masalah besar ketika Anda berhadapan dengan lebih dari satu elemen <img>. Kita berharap bahwa kode di atas akan menghilangkan elemen <img> hanya pada gambar yang diklik saja. Tapi pada kenyataannya, saat salah satu gambar diklik, gambar yang lain juga akan ikut menghilang.

Gunakan Selektor $(this) 

Kode di atas tidak layak dipakai karena selektor yang mengarahkan kepada elemen terpicu/target (dalam hal ini adalah elemen yang dikenai efek .fadeOut()) tidak spesifik. Menggunakan selektor this dapat 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 kemudian 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".