jQuery duyệt qua - phương pháp is()

Hướng dẫn lặp qua jQuery

Mô hình

Trả về false, vì phần tử cha của input là phần tử p:

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

Thử ngay

Định nghĩa và cách sử dụng

is() kiểm tra bộ tập hợp phần tử phù hợp dựa trên chọn lọc, phần tử hoặc đối tượng jQuery, nếu ít nhất một phần tử trong chúng phù hợp với tham số được cung cấp, thì trả về true.

Ngữ pháp

.is(selector)
Tham số Mô tả
selector Giá trị chuỗi, chứa biểu thức chọn phần tử phù hợp.

Mô tả chi tiết

Khác với các phương pháp lọc khác, .is() không tạo ra đối tượng jQuery mới. Thay vào đó, nó cho phép chúng ta kiểm tra đối tượng jQuery mà không cần thay đổi nội dung của đối tượng jQuery. Điều này thường hữu ích trong callback, chẳng hạn như trình xử lý sự kiện.

Giả sử chúng ta có một danh sách, trong đó hai mục chứa các phần tử con:

</ul>
  <li>list <strong>item 1</strong></li>
  <li><span>item danh sách 2</span></li>
  <li>item danh sách 3</li>
</ul>

Bạn có thể thêm trình xử lý click vào phần tử <ul>, và sau đó giới hạn mã chỉ khi phần tử danh sách本身, không phải các phần tử con, được nhấp thì mới kích hoạt:

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

Thử ngay

Hiện tại, khi người dùng nhấp vào từ "list" trong phần đầu tiên của danh sách hoặc bất kỳ từ nào trong phần thứ ba của danh sách, phần tử danh sách được nhấp sẽ được thiết lập màu nền đỏ. Tuy nhiên, khi người dùng nhấp vào "item 1" trong phần đầu tiên hoặc bất kỳ từ nào trong phần thứ hai, sẽ không có bất kỳ thay đổi nào, vì trong các trường hợp trên, mục tiêu của sự kiện là <strong> là <span>.

Vui lòng chú ý, đối với biểu thức chọn lọc có tính vị trí, chẳng hạn như :first, :gt() hoặc :even, lọc vị trí là đối với đối tượng jQuery được truyền vào .is() thay vì đối với tài liệu. Do đó, biểu thức như $("li:first").is("li:last") trả về true, nhưng $("li:first-child").is("li:last-child") trả về false.

Sử dụng hàm

Cách sử dụng thứ hai của phương pháp này là tính toán biểu thức liên quan đến yếu tố dựa trên hàm thay vì biểu thức chọn lọc. Đối với mỗi yếu tố, nếu hàm trả về true, thì .is() cũng trả về true. Ví dụ, dưới đây là đoạn HTML phức tạp hơn:

</ul>
  <li><strong>danh sách</strong> item 1 - một thẻ strong
  <li><strong>danh sách</strong> item <strong>2</strong> -
    hai <span>thẻ strong</span></li>
  <li>item danh sách 3</li>
  <li>item danh sách 4</li>
  <li>item danh sách 5</li>
</ul>

Bạn có thể thêm trình xử lý click cho mỗi <li> để tính số lượng yếu tố <strong> bên trong <li> được nhấp vào:

$("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");
  }
});

Thử ngay

Hướng dẫn lặp qua jQuery