Pemilahan jQuery - Metode is()

Panduan Pencarian jQuery

Contoh

Mengembalikan false, karena elemen induk input adalah elemen p:

  var isFormParent = $("input[type='checkbox']").parent();.is("form");
  $("div").text("isFormParent = " + isFormParent);

Coba sendiri

Definisi dan penggunaan

is() menguji kumpulan elemen yang cocok berdasarkan pemilihan, elemen, atau objek jQuery, jika setidaknya satu elemen cocok dengan parameter yang diberikan, maka mengembalikan true.

Sintaks

.is(selector)
Parameter Deskripsi
selector Nilai string, berisi ekspresi pemilihan elemen yang cocok.

Penjelasan detil

Berbeda dengan metode filter lainnya, .is() tidak membuat objek jQuery baru. Sebaliknya, ia memungkinkan kami untuk melakukan deteksi pada objek jQuery tanpa mengubah konten objek jQuery. Ini biasanya sangat berguna di dalam callback, seperti program peristiwa.

Dengan asumsi kita memiliki daftar yang memiliki dua proyek dengan elemen anak:

<ul>
  <li>list <strong>item 1</strong></li>
  <li><span>item daftar 2</span></li>
  <li>item daftar 3</li>
</ul>

Anda dapat menambahkan program click kepada elemen <ul> dan membatasi kode hanya berlaku ketika item daftar sendiri, bukan elemen anak, yang di-klik untuk memicu:

$("ul").click(function(event) {
  var $target = $(event.target);
  if ( $target.is("li") ) {
    $target.css("background-color", "red");
  }
});

Coba sendiri

Sekarang, ketika pengguna mengeklik kata "list" di item pertama dalam daftar atau kata apapun di item ketiga, item yang di-klik akan di-set dengan latar belakang merah. Namun, ketika pengguna mengeklik kata "item 1" di item pertama atau kata apapun di item kedua, tak akan ada perubahan apapun, karena dalam situasi di atas, target peristiwa adalah <strong> adalah <span>.

Harap perhatikan, untuk ekspresi selector yang mempunyai selector posisional, seperti :first, :gt() atau :even, pengecekan posisional adalah untuk objek jQuery yang dilempar ke .is(), bukan untuk dokumen. Jadi untuk HTML di atas, ekspresi seperti $("li:first").is("li:last") mengembalikan true, tetapi $("li:first-child").is("li:last-child") mengembalikan false.

Menggunakan fungsi

Penggunaan kedua metode ini adalah, mengevaluasi ekspresi elemen yang berdasarkan fungsi bukannya selector. Untuk setiap elemen, jika fungsi mengembalikan true, .is() juga mengembalikan true. Sebagai contoh, berikut adalah bagian HTML yang lebih kompleks:

<ul>
  <li><strong>daftar</strong> item 1 - satu tag strong</li>
  <li><strong>daftar</strong> item <strong>2</strong> -
    dua <span>tags strong</span></li>
  <li>item daftar 3</li>
  <li>item daftar 4</li>
  <li>item daftar 5</li>
</ul>

Anda dapat menambahkan program klik untuk setiap <li> untuk menghitung jumlah elemen <strong> dalam <li> yang diklik:

$("li").click(function() {
  var $li = $(this),
    isWithTwo = $li.is(function() {
      return $('strong', this).length === 2;
    });;
  if ( isWithTwo ) {
    $li.css("background-color", "green");
  } else {
    $li.css("background-color", "red");
  }
});

Coba sendiri

Panduan Pencarian jQuery