Pemantauan jQuery - Metode is()

Panduan Pelengkap Penggulungan jQuery

Contoh

Kembalikan false, kerana bapak elemen input adalah elemen p:

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

Coba sendiri

Definisi dan penggunaan

is() mengesahkan kumpulan elemen yang disesuaikan berdasarkan pemilih, elemen atau objek jQuery, jika setidaknya satu elemen di dalamnya yang disesuaikan dengan parameter yang diberikan, maka kembalikan true.

Sintaksis

.is(pemilih)
Parameter Deskripsi
pemilih Nilai string, mengandungi ekspresi pemilihan elemen yang disesuaikan.

Penjelasan detil

Berbeza dengan metode penilaian lain, .is() tidak mencipta objek jQuery baru. Sebaliknya, ia memungkinkan kami untuk mengesahkan objek jQuery tanpa mengubah kandungan objek jQuery. Ini biasanya sangat berkesan di dalam callback, seperti program pemrosesan peristiwa.

Dengan asumsi kita memiliki senarai yang mempunyai dua item yang mengandungi elemen anak:

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

Anda boleh menambahkan pemproses click kepada elemen <ul> dan membatasi kode hanya untuk memanggil saat item dalam senarai sendiri, bukannya elemen anak, diklik:

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

Coba sendiri

Sekarang, apabila pengguna mengklik kata "list" di dalam item pertama dalam senarai atau setiap kata di item ketiga, item yang diklik akan diatur latar belakang warna merah. Walau bagaimanapun, apabila pengguna mengklik kata "item 1" di dalam item pertama atau setiap kata di item kedua, tiada perubahan akan terjadi, kerana dalam situasi di atas, objek sasaran adalah <strong> adalah <span>.

Sila perhatikan, untuk ekspresi pemilihan perekrutan yang mempunyai pemilihan posisi, seperti :first, :gt() atau :even, pemilihan posisi adalah untuk objek jQuery yang disampaikan ke .is(), bukan untuk dokumen yang mengandungnya. Jadi untuk HTML di atas, ekspresi seperti $("li:first").is("li:last") mengembalikan true, tetapi $("li:first-child").is("li:last-child") mengembalikan false.

Gunakan fungsi

Penggunaan kedua metodenya adalah, untuk mengevaluasi ekspresi elemen yang berdasarkan fungsi bukannya pemilihan perekrutan. Untuk setiap elemen, jika fungsi mengembalikan true, .is() juga mengembalikan true. Contohnya, di bawah adalah potongan 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 boleh menambahkan program click untuk setiap <li> untuk mengira jumlah elemen <strong> yang berada di 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 Pelengkap Penggulungan jQuery