Pencarian jQuery - metode find()

Referensi Pencarian jQuery

Contoh

Cari semua turunan elemen span di dalam paragraf dan atur warna warna mereka ke merah:

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

Coba sendiri

Definisi dan penggunaan

Metode find() mendapatkan turunan dari setiap elemen dalam kumpulan elemen saat ini, melalui pemilih, objek jQuery, atau elemen untuk disaring.

Sintaks

.find(selector)
Parameter Deskripsi
selector Nilai string, berisi ekspresi pemilih untuk memilih kumpulan elemen saat ini.

Penjelasan detil

Jika diberikan objek jQuery yang mewakili kumpulan elemen DOM, metode .find() memungkinkan kami mencari turunan elemen ini di pohon DOM dan membuat objek jQuery baru dengan elemen yang cocok. .find() mirip dengan metode .children(), tetapi yang terakhir hanya mengalir ke bawah pohon DOM di tingkat tunggal.

Fitur yang jelas pertama dari metode .find() adalah, ekspresi pemilih yang diterima sama seperti tipe ekspresi yang disampaikan ke fungsi $(). Akar untuk menfilter elemen melalui pengujian apakah elemen yang cocok dengan ekspresi ini.

Silakan berpikir tentang daftar yang disederhanakan 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 di dalam daftar II:

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

Coba sendiri

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

Beberapa metode pencarian pohon lainnya berbeda, ekspresi selector wajib untuk .find(). Jika kami membutuhkan pengembalian semua elemen turunan, dapat kirim selector gantian '*'.

Context selector disebabkan 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 berikutnya, kami menulis seperti ini pertama-tentu:

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 mengandung elemen daftar yang termasuk turunan daftar II.

Secara serupa, Anda dapat mengirimkan sebuah elemen:

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

Coba sendiri

Hasil pemanggilan ini adalah proyek 1 diatur latar belakang merah.

Referensi Pencarian jQuery