Cara Memilih Elemen dengan Selector jQuery

Selector jQuery adalah pola teks yang kamu kirim ke fungsi $() untuk mengambil elemen dari halaman. Kalau kamu pernah menulis $('#tombol').hide(), bagian #tombol itulah selectornya. Memahami selector membuat kode manipulasi DOM jadi lebih singkat dan lebih mudah dirawat.

Dasar selector jQuery dan cara kerjanya

Fungsi $() menerima string selector, lalu mengembalikan objek jQuery berisi nol atau lebih elemen yang cocok. Objek ini mirip array: punya length dan bisa diakses lewat indeks, tetapi juga membawa banyak method seperti .addClass() atau .on().

const semuaParagraf = $('p');
console.log(semuaParagraf.length); // jumlah paragraf di halaman
console.log(semuaParagraf[0]);     // elemen DOM mentah

Selector jQuery mengadopsi sintaks CSS, jadi aturan yang sudah kamu hafal dari stylesheet berlaku hampir seluruhnya. Bedanya, jQuery menambahkan beberapa ekstensi seperti :visible dan :checked yang tidak ada di CSS standar.

Jenis selector yang paling sering dipakai

Ada empat kelompok selector yang menutup sebagian besar kebutuhan sehari-hari. Mengenal kelompoknya membantu kamu memilih yang paling tepat, bukan yang paling panjang.

• Selector tag: $('div') mengambil semua elemen div. Berguna untuk operasi massal, tetapi jarang dipakai sendirian di halaman besar.
• Selector id: $('#formDaftar') mengambil satu elemen dengan id tersebut. Paling cepat karena browser memakai indeks id.
• Selector class: $('.pesan-error') mengambil semua elemen dengan class itu. Cocok untuk elemen yang berulang.
• Selector atribut: $('a[target="_blank"]') mengambil tautan yang membuka tab baru.

Kamu bisa menggabungkan beberapa selector dengan koma untuk mengambil elemen dari kelompok berbeda dalam satu panggilan.

$('.pesan-error, .pesan-sukses').addClass('terlihat');

Selector turunan dan anak langsung

Tanda spasi memilih elemen di dalam elemen lain pada tingkat mana pun, sedangkan tanda > membatasi ke anak langsung.

// semua tautan di dalam navigasi, termasuk yang bersarang di dalam list
$('nav a').addClass('tautan-nav');

// hanya tautan yang menjadi anak langsung dari nav
$('nav > a').addClass('tautan-utama');

Perbedaan ini terasa ketika struktur HTML punya beberapa tingkat pembungkus. Selector anak langsung mencegah aturan ikut mengenai elemen yang tidak kamu maksud.

Filter untuk mempersempit hasil

Setelah selector mengambil sekumpulan elemen, filter memotongnya jadi lebih sedikit. jQuery menyediakan dua cara: filter berbasis posisi di dalam selector, dan method filter yang dipanggil setelahnya.

Filter posisi dan isi

• :first dan :last mengambil elemen pertama atau terakhir dari hasil.
• :eq(n) mengambil elemen pada indeks tertentu, dimulai dari nol.
• :even dan :odd memilih baris tabel atau daftar bergantian.
• :contains("teks") memilih elemen yang berisi teks tertentu.
• :visible dan :hidden menyaring berdasarkan kondisi tampil.

$('li:odd').addClass('baris-gelap');
$('input:checked').each(function () {
  console.log($(this).val());
});

Filter posisi seperti :first diproses jQuery di sisi klien, bukan oleh mesin CSS browser. Untuk daftar yang sangat panjang, method .first() dan .eq() biasanya lebih cepat karena jQuery bisa memakai querySelectorAll lebih dulu.

Method filter dan not

Method .filter() menerima selector atau fungsi. Versi fungsi berguna ketika kondisi pemilihan butuh logika yang tidak bisa ditulis di selector.

$('.produk')
  .filter(function () {
    return $(this).data('stok') > 0;
  })
  .addClass('tersedia');

Kebalikannya, .not() membuang elemen dari hasil. Pola ini sering muncul saat kamu ingin memberi gaya ke semua baris kecuali baris terakhir.

$('tr').not(':last').addClass('garis-bawah');

Traversal: berpindah dari elemen yang sudah dipilih

Traversal dipakai ketika kamu sudah memegang satu elemen dan ingin mencapai elemen lain yang berhubungan dengannya. Ini lebih aman daripada menulis selector global yang bergantung pada struktur halaman.

• .parent() naik satu tingkat ke elemen pembungkus.
• .closest(selector) naik sampai menemukan elemen yang cocok, termasuk elemen itu sendiri.
• .children() mengambil anak langsung.
• .find(selector) mencari keturunan pada tingkat mana pun.
• .siblings() mengambil elemen lain yang seinduk.
• .next() dan .prev() berpindah ke elemen bersaudara terdekat.

Contoh yang sering muncul: tombol hapus di dalam daftar item. Kamu tidak perlu memberi id unik pada setiap baris. Cukup cari pembungkus terdekat dari tombol yang diklik, lalu hapus pembungkus itu.

$('.daftar').on('click', '.hapus', function () {
  $(this).closest('li').remove();
});

Perhatikan bahwa .closest() bekerja dari elemen tombol, bukan dari document. Akibatnya kode tetap berjalan meski daftar bertambah atau berubah urutan.

Kesalahan umum saat menulis selector

Sebagian besar bug selector berasal dari beberapa pola yang berulang. Memeriksa daftar berikut lebih cepat daripada menebak kenapa elemen tidak berubah.

1. Id ganda. Satu halaman seharusnya hanya punya satu elemen per id. Kalau ada dua, $('#id') hanya mengembalikan yang pertama.
2. Selector terlalu spesifik. Rantai panjang seperti $('body > div.container > div > ul > li > a') langsung rusak saat struktur HTML dirapikan.
3. Lupa escape karakter khusus. Id atau class yang mengandung titik atau titik dua perlu di-escape, misalnya $('#item\.khusus').
4. Menjalankan selector sebelum DOM siap. Bungkus kode dalam $(function () { ... }) atau letakkan script di akhir body.
5. Mengira hasil selector bersifat live. Objek jQuery tidak otomatis memperbarui diri saat DOM berubah. Panggil selector lagi kalau elemen baru ditambahkan.

Kapan memakai selector CSS biasa

Untuk mengambil satu elemen tanpa manipulasi lanjutan, document.querySelector sudah cukup dan tidak memerlukan library. Selector jQuery memberi nilai tambah ketika kamu perlu merangkai beberapa operasi, memakai event delegation, atau bekerja di basis kode yang sudah memakai jQuery di banyak tempat.

Selector yang baik menjelaskan maksud kodenya. Kalau kamu harus membaca HTML untuk memahami sebuah selector, kemungkinan selector itu terlalu rapuh.

Sebagai kebiasaan, pilih selector berdasarkan class atau atribut yang memang menandai fungsi elemen, bukan berdasarkan posisi atau tag pembungkus. Halaman yang dirapikan ulang tidak akan mematahkan kode seperti $('.tombol-simpan').

Mulai dari selector paling sederhana yang cocok, tambahkan filter hanya jika perlu, dan gunakan traversal untuk berpindah dari elemen yang sudah kamu pegang. Tiga kebiasaan ini menutup sebagian besar pekerjaan pemilihan elemen dalam jQuery.

Pertanyaan yang Sering Diajukan

Apa perbedaan $('div') dan $(document).find('div')?

Keduanya mencari elemen div di seluruh dokumen. Bentuk pertama lebih ringkas dan langsung memakai konteks document. Bentuk kedua berguna ketika kamu ingin membatasi pencarian ke elemen lain, misalnya $('#panel').find('div') agar hanya mencari di dalam panel tersebut.

Apakah :visible bisa dipakai di dalam selector CSS?

Tidak. :visible adalah ekstensi jQuery, bukan pseudo-class CSS standar. Browser tidak mengenalinya di stylesheet. Untuk mengecek visibilitas lewat JavaScript murni, kamu perlu memeriksa properti seperti offsetWidth atau gaya display secara manual.

Kenapa selector saya tidak menemukan elemen yang baru ditambahkan?

Kemungkinan besar selector dijalankan sebelum elemen itu ada di DOM, atau kamu menyimpan hasil seleksi di variabel lalu memakainya lagi. Objek jQuery tidak memantau perubahan DOM. Jalankan ulang seleksi setelah elemen ditambahkan, atau gunakan event delegation dengan .on() pada elemen induk yang sudah ada.