jQuery duyệt - phương thức closest()

Hướng dẫn lặp jQuery

Ví dụ

Ví dụ này minh họa cách sử dụng closest() để hoàn thành sự ủy quyền sự kiện. Khi phần tử danh sách gần nhất hoặc phần tử con-nghệ-sản của nó được nhấp, sẽ切换 màu nền vàng:

$( document ).bind("click", function( e ) {
    $( e.target ).closest("li").toggleClass("hilight");
  });

Thử ngay

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

Phương thức .closest() trả về phần tử tổ tiên đầu tiên khớp với bộ lọc, bắt đầu từ phần tử hiện tại theo cây DOM.

Syntax

.closest(selector)
Parameter Mô tả
selector Giá trị chuỗi, chứa biểu thức bộ lọc khớp với phần tử.

Mô tả chi tiết

Nếu cho trước đối tượng jQuery đại diện cho bộ sưu tập phần tử DOM, phương thức .closest() cho phép chúng ta truy xuất các phần tử này trong cây DOM và các phần tử tổ tiên của chúng, và xây dựng mới một đối tượng jQuery từ các phần tử khớp..parents() Giống như phương thức .closest(), cả hai đều traverse theo cây DOM theo hướng lên. Sự khác biệt giữa chúng mặc dù rất tinh tế, nhưng lại rất quan trọng:

.closest() .parents()
Bắt đầu từ phần tử hiện tại Bắt đầu từ phần tử cha
Traverse theo cây DOM theo hướng lên, đến khi tìm thấy phần tử khớp với bộ lọc đã áp dụng. Traverse theo cây DOM theo hướng lên, đến khi tìm thấy phần tử gốc của tài liệu, thêm từng phần tử tổ tiên vào một bộ tạm thời; nếu đã áp dụng bộ lọc, bộ lọc này sẽ được lọc dựa trên bộ lọc đó.
Trả về đối tượng jQuery chứa không có hoặc một phần tử Trả về đối tượng jQuery chứa không có, một hoặc nhiều phần tử

Xin xem đoạn mã HTML bên dưới:

<ul id="one" class="level-1">
  <li class="item-i">I</li>
  <li id="ii" class="item-ii">II
  <ul class="level-2">
    <li class="item-a">A</li>
    <li class="item-b">B
      <ul class="level-3">
        <li class="item-1">1</li>
        <li class="item-2">2</li>
        <li class="item-3">3</li>
      </ul>
    </li>
    <li class="item-c">C</li>
  </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

Ví dụ 1

Giả sử chúng ta thực hiện một cuộc tìm kiếm từ mục A đối với phần tử <ul>:

$('li.item-a').closest('ul').css('background-color', 'red');

Thử ngay

Điều này sẽ thay đổi màu sắc của <ul> cấp 2, vì khi lặp DOM cây, nó sẽ gặp phần tử này đầu tiên.

Ví dụ 2

Giả sử chúng ta đang tìm kiếm phần tử <li>:

$('li.item-a').closest('li').css('background-color', 'red');

Thử ngay

Điều này sẽ thay đổi màu sắc của mục A. Trước khi lặp DOM cây, phương thức .closest() sẽ bắt đầu từ phần tử li và tìm kiếm cho đến khi khớp với mục A.

Ví dụ 3

Chúng ta có thể truyền phần tử DOM làm ngữ cảnh, trong đó tìm kiếm phần tử gần nhất.

var listItemII = document.getElementById('ii');
$('li.item-a').closest('ul', listItemII).css('background-color', 'red');
$('li.item-a').closest('#one', listItemII).css('background-color', 'green');

Thử ngay

Mã trên sẽ thay đổi màu sắc của <ul> cấp 2, vì nó cả là tổ tiên đầu tiên của mục A và cũng là con cháu của mục II. Nó sẽ không thay đổi màu sắc của <ul> cấp 1, vì nó không phải là con cháu của mục II.

Hướng dẫn lặp jQuery