Pemutar jQuery - metode closest()

Panduan Penelusuran jQuery

Contoh

Contoh ini menunjukkan bagaimana melaksanakan delegasi peristiwa melalui closest(). Saat elemen daftar terdekat atau anak-anak turunannya di klik, latar belakang kuning akan diubah:

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

Cuba sendiri

Definisi dan penggunaan

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

Sintaks

.closest(selector)
Parameter Deskripsi
selector Nilai string, mengandung ekspresi pilihan yang cocok dengan elemen yang dicari.

Penjelasan detil

Jika diberikan objek jQuery yang mewakili koleksi elemen DOM, metode .closest() memungkinkan kita untuk mengambil elemen-elemen tersebut di pohon DOM serta nenek moyang mereka dan membangun objek jQuery baru yang cocok dengan elemen yang cocok..parents() Dengan cara yang sama seperti .closest(), keduanya melintasi pohon DOM ke atas. Perbedaan antara keduanya walaupun halus, tetapi penting:

.closest() .parents()
Dari elemen saat ini Dari elemen orang tua
Melintasi pohon DOM ke atas sampai menemukan yang pertama yang cocok dengan pilihan yang digunakan. Melintasi pohon DOM ke atas sampai elemen root dokumen, menambah setiap elemen nenek moyang ke dalam koleksi sementara; jika pilihan digunakan, koleksi 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 keseluruhan 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 yang dicari adalah pencarian elemen <ul> dari item A:

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

Cuba sendiri

Ia akan mengubah warna <ul> level-2, kerana ketika memulakan penelusuran pohon DOM akan pertama kali menemui elemen ini.

Contoh 2

Dengan asumsi yang dicari adalah elemen <li>:

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

Cuba sendiri

Ia akan mengubah warna item daftar A. Sebelum .closest() metode memulakan penelusuran pohon DOM, akan mulai dari elemen li sendiri, sehingga mencari pilihan A yang disesuaikan.

Contoh 3

Kami boleh menghantar elemen DOM sebagai konteks, di mana mencari elemen terdekat.

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');

Cuba sendiri

Kod di atas akan mengubah warna <ul> level-2, kerana ia adalah cikal bakal pertama <ul> item A dan juga turunannya item II. Ia tidak akan mengubah warna <ul> level-1, kerana ia bukan turunannya item II.

Panduan Penelusuran jQuery