Pemutar jQuery - metod find()

Panduan Pelengkap Penelusuran jQuery

Contoh

Cari semua elemen span turun dari paragraf dan tetapkan warna warna mereka kepada merah:

$("p").find("span").css('color','red');

Coba sendiri

Definisi dan penggunaan

Metod find() mengambil anak-anak setiap elemen dalam kumpulan elemen semasa, melalui pemilihan, objek jQuery atau elemen untuk menyaring.

Sintaks

.find(selector)
Parameter Penerangan
selector Nilai string, yang mengandungi ekspresi pemilihan untuk dipilih elemen kumpulan semasa.

Penjelasan detil

Jika diberikan objek jQuery yang mewakili kumpulan elemen DOM, metod .find() membenarkan kami mencari anak-anak elemen ini di pohon DOM dan membina objek jQuery baru yang disusun daripada elemen yang sepadan. Metod .find() adalah sama seperti metod .children(), tetapi yang terakhir hanya melintasi tingkat tunggal pohon DOM.

Ciri yang jelas pertama daripada metod .find() adalah, ia menerima ekspresi pemilihan yang sama seperti ekspresi yang disampaikan kepada fungsi $(). Pemilihan akan dilakukan melalui pengujian sama ada elemen sepadan dengan ekspresi ini untuk mengfilter elemen-elemen.

Pikirkan senarai yang sederhana yang disediakan di bawah ini:

<ul class="level-1">
  <li class="item-i">I</li>
  <li 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>

Kami akan mulai mencari item dalam daftar II:

$('li.item-ii').find('li').css('background-color', 'red');

Coba sendiri

Hasil penelitian kali ini adalah proyek A, B, 1, 2, 3 dan C semua diatur dengan latar belakang merah. Meskipun proyek II cocok dengan ekspresi pemilih, ia tidak akan disertakan dalam hasil; hanya untuk elemen turun.

Beberapa metode penelusuran pohon lainnya berbeda, ekspresi pemilih untuk .find() adalah parameter yang diperlukan. Jika kami memerlukan pengambilan semua elemen turun, kami dapat mengirim pemilih wildcard '*'.

Konteks pemilih adalah yang diatur oleh metode .find(); sehingga $('li.item-ii').find('li') sama dengan $('li', 'li.item-ii').

Untuk jQuery 1.6, kami masih dapat menggunakan kumpulan jQuery atau elemen yang diberikan untuk penilaian. Tetap saja dalam daftar yang terdapat tingkat yang sama, kita menulis seperti ini pertama kali:

var $allListElements = $('li');

Lalu kirim objek jQuery ini ke metode find:

$('li.item-ii').find( $allListElements );

Coba sendiri

Kode di atas akan mengembalikan kumpulan jQuery yang berisi elemen daftar yang termasuk keturunan daftar II.

Secara serupa, Anda juga dapat mengirimkan elemen:

var item1 = $('li.item-1')[0];
$('li.item-ii').find( item1 ).css('background-color', 'red');

Coba sendiri

Hasil pemanggilan kali ini adalah proyek 1 diatur dengan latar belakang merah.

Panduan Pelengkap Penelusuran jQuery