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

Hướng dẫn duyệt jQuery

Mô hình

Tìm kiếm tất cả các phần tử b là phần tử cha của mỗi phần tử:

$("b").parents()

Thử trực tiếp

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

parents() Lấy các phần tử tổ tiên của mỗi phần tử trong tập hợp phần tử khớp hiện tại, việc sử dụng bộ lọc selector là tùy chọn.

.parents()selector)
Tham số Mô tả
selector Giá trị chuỗi, chứa biểu thức chọn lọc để khớp yếu tố.

Giải thích chi tiết

Nếu cung cấp một đối tượng jQuery biểu thị bộ sưu tập yếu tố DOM, phương pháp .parents() cho phép chúng ta tìm kiếm các yếu tố tổ tiên của các yếu tố đó trong cây DOM, và tạo ra một đối tượng jQuery mới từ các yếu tố khớp được sắp xếp theo thứ tự từ yếu tố cha gần nhất lên. Các yếu tố được trả về theo thứ tự từ yếu tố cha gần nhất ra ngoài. .parents() và .parent() Phương pháp tương tự, nhưng khác nhau ở chỗ后者 duyệt theo DOM cây lên một cấp.

Phương pháp này chấp nhận biểu thức chọn lọc tùy chọn, giống như loại tham số chúng ta truyền vào hàm $(). Nếu áp dụng biểu thức chọn lọc này, thì sẽ lọc yếu tố bằng cách kiểm tra yếu tố có khớp với biểu thức chọn lọc hay không.

Hãy suy nghĩ về trang này với danh sách嵌套 cơ bản:

<ul class="level-1">
  <li class="item-i">I</li>
  <li 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>

Nếu chúng ta bắt đầu từ mục A, thì có thể tìm thấy các yếu tố tổ tiên của nó:

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

Thử trực tiếp

Kết quả của cuộc gọi này là, các yếu tố như danh sách level-2, mục II và danh sách level-1 (từ DOM cây lên đến <html>) được thiết lập nền đỏ. Do chúng ta không áp dụng biểu thức chọn lọc, yếu tố cha tự nhiên trở thành một phần của đối tượng. Nếu đã áp dụng biểu thức chọn lọc, thì sẽ kiểm tra yếu tố có khớp với biểu thức chọn lọc hay không trước khi bao gồm yếu tố. Do chúng ta không áp dụng biểu thức chọn lọc, tất cả các yếu tố tổ tiên đều là phần của đối tượng jQuery được trả về. Nếu đã áp dụng biểu thức chọn lọc, thì chỉ bao gồm các yếu tố khớp với biểu thức chọn lọc.

Hướng dẫn duyệt jQuery