jQuery Pencarian - Metode filter()

Panduan Penelusuran jQuery

Contoh

Ubah warna semua div, lalu tambahkan garisan ke kelas yang bernama "middle":

$("div").css("background", "#c8ebcc")
  .filter(".middle")
  .css("border-color", "red");

Coba sendiri

Definisi dan penggunaan

Metode filter() akan memotong kumpulan elemen yang cocok untuk elemen yang cocok dengan pemilihan pemilihan yang ditentukan.

Sintaks

.filter(pemilih)
Parameter Deskripsi
pemilih Nilai string, berisi ekspresi pemilihan untuk mencocokkan kumpulan elemen saat ini.

Penjelasan detil

Jika diberikan objek jQuery yang mewakili kumpulan elemen DOM, metode .filter() akan membuat objek jQuery baru yang diambil dari kumpulan elemen yang cocok. Pemilihan pemilihan yang digunakan akan menguji setiap elemen; semua elemen yang cocok dengan pemilihan pemilihan akan disertakan dalam hasil.

Berfikir tentang halaman yang memiliki daftar sederhana di bawah ini:

<ul>
  <li>item daftar 1</li>
  <li>item daftar 2</li>
  <li>item daftar 3</li>
  <li>item daftar 4</li>
  <li>item daftar 5</li>
  <li>item daftar 6</li>
</ul>

Kami boleh menerapkan metode ini ke koleksi item daftar ini:

$('li').filter(':even').css('background-color', 'red');

Coba sendiri

Hasil panggilan ini adalah mengatur warna latar belakang item 1, 3, 5 menjadi merah, karena mereka semua cocok dengan pemilihan pemilihan (ingatlah, :even dan :odd menggunakan index berdasarkan 0).

Gunakan fungsi penyaring

Forma kedua penggunaan metode ini adalah melalui fungsi bukannya pilih pemilihan untuk menyaring elemen. Untuk setiap elemen, jika fungsi kembalikan true, elemen akan disertakan dalam koleksi yang disaring; sebaliknya, elemen akan dihalangi.

Lihat bagian HTML yang sedikit kompleks di bawah ini:

<ul>
  <li><strong>list</strong> item 1 - one strong tag</li>
  <li><strong>list</strong> item <strong>2</strong>
   - two <span>strong tags</span></li>
  <li>item daftar 3</li>
  <li>item daftar 4</li>
  <li>item daftar 5</li>
  <li>item daftar 6</li>
</ul>

Kami boleh memilih item daftar ini dan menyaring mereka berdasarkan konten mereka:

$('li').filter(function(index) {
  return $('strong', this).length == 1;
}).css('background-color', 'red');

Panduan Penelusuran jQuery