Pemilahan jQuery - Metode .closest()

Referensi Perjalanan jQuery

Contoh

Contoh ini menunjukkan bagaimana dapat menyelesaikan perwakilan peristiwa dengan .closest(). Ketika elemen daftar paling dekat atau turunannya diklik, latar belakang kuning akan berubah:

$( document ).bind("click", function( e ) {
    $( e.target ).closest("li").toggleClass("hilight");
  });

Coba sendiri

Definisi dan penggunaan

Metode .closest() mendapatkan elemen nenek moyang pertama yang cocok pilihan, memulai dari elemen saat ini ke atas tree DOM.

Syarat

.closest(selector)
Parameter Deskripsi
selector Nilai string, berisi ekspresi pilihan elemen yang cocok

Penjelasan detil

Jika diberikan objek jQuery yang mewakili kumpulan elemen DOM, metode .closest() memungkinkan kita untuk mengambil elemen-elemen ini di tree DOM serta nenek moyang mereka, dan membangun objek jQuery baru dengan elemen yang cocok..parents() Dengan cara yang sama seperti .closest(), keduanya mengelilingi tree DOM ke atas.

.closest() .parents()
Dari elemen saat ini Dari elemen orang tua
Mengelilingi tree DOM ke atas hingga menemukan yang pertama yang cocok pilihan yang digunakan. Mengelilingi tree DOM ke atas hingga elemen akar dokumen, menambahkan setiap elemen nenek moyang ke dalam kumpulan sementara; jika pilihan digunakan, kumpulan ini akan disaring berdasarkan pilihan tersebut.
Mengembalikan objek jQuery yang mengandung nol atau satu elemen Mengembalikan objek jQuery yang mengandung nol, satu, atau beberapa elemen

Lihat bagian HTML di bawah ini:

<ul id="one" class="level-1">
  <li class="item-i">I</li>
  <li id="ii" class="item-ii">II
  <ul class="level-2">
    <li class="item-a">A</li>
    <li class="item-b">B
      <ul class="level-3">
        <li class="item-1">1</li>
        <li class="item-2">2</li>
        <li class="item-3">3</li>
      </ul>
    </li>
    <li class="item-c">C</li>
  </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

Contoh 1

Dengan asumsi bahwa kita melakukan pencarian dari item A ke elemen <ul>:

$('li.item-a').closest('ul').css('background-color', 'red');

Coba sendiri

Ini akan mengubah warna <ul> level-2, karena saat mengembalikan ke atas pohon DOM, elemen ini akan ditemukan pertama kali.

Contoh 2

Dengan asumsi bahwa kita mencari elemen <li>:

$('li.item-a').closest('li').css('background-color', 'red');

Coba sendiri

Ini akan mengubah warna item daftar A. Sebelum memulai pengembalian ke arah atas pohon DOM, metode .closest() akan mulai mencari dari elemen li sendiri, sampai mencocokkan item A.

Contoh 3

Kami dapat mengirimkan elemen DOM sebagai konteks, di mana mencari elemen yang paling dekat.

var listItemII = document.getElementById('ii');
$('li.item-a').closest('ul', listItemII).css('background-color', 'red');
$('li.item-a').closest('#one', listItemII).css('background-color', 'green');

Coba sendiri

Kode di atas akan mengubah warna <ul> level-2, karena ia keduanya kakek pertama <ul> item A dan turunannya item II. Ia tidak akan mengubah warna <ul> level-1, karena ia bukan turunannya item II.

Referensi Perjalanan jQuery