jQuery Perulangan - Metode filter()

Referensi Perulangan jQuery

Contoh

Ubah warna semua div, lalu tambahkan garis 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 menjadi elemen yang cocok dengan selector yang ditentukan.

Sintaks

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

Keterangan detil

Jika diberikan objek jQuery yang mewakili kumpulan elemen DOM, metode .filter() akan membuat objek jQuery baru yang terdiri dari kumpulan elemen yang cocok. Selector yang digunakan akan menguji setiap elemen; semua elemen yang cocok dengan selector ini akan termasuk dalam hasil.

Berpikir 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 dapat menerapkan metode ini ke koleksi item daftar ini:

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

Coba sendiri

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

Penggunaan fungsi penyaring

Formulir kedua metode ini adalah melalui fungsi daripada selector untuk menyaring elemen. Untuk setiap elemen, jika fungsi ini mengembalikan true, elemen akan termasuk dalam koleksi yang disaring; sebaliknya, elemen akan dihapus.

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>tags strong</span></li>
  <li>item daftar 3</li>
  <li>item daftar 4</li>
  <li>item daftar 5</li>
  <li>item daftar 6</li>
</ul>

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

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

Referensi Perulangan jQuery