Phương thức jQuery parent ()

❮ Phương thức duyệt jQuery

Thí dụ

Trả lại tất cả các phần tử tổ tiên của <span>:

$(document).ready(function(){
  $("span").parents().css({"color": "red", "border": "2px solid red"});
});

Kết quả:

body (great-great-grandparent)
div (great-grandparent)
    ul (grandparent)
  • li (direct parent) span

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

Phương thức cha mẹ () trả về tất cả các phần tử tổ tiên của phần tử đã chọn.

Tổ tiên là cha mẹ, ông bà, cụ cố, vân vân.

Cây DOM: Phương thức này truyền lên trên từ phần tử mẹ dọc theo tổ tiên của các phần tử DOM, đến tận phần tử gốc của tài liệu (<html>).

Lưu ý: Nếu tham số bộ lọc trống, hàm này sẽ chọn tất cả các phần tử tổ tiên của một tập hợp các phần tử, từ phần tử gốc trực tiếp và cho đến <body> và <html>. Do đó, nó thường hữu ích khi chuyển một biểu thức bộ chọn để thu hẹp kết quả tìm kiếm.

Phương thức này tương tự như gần nhất () , cả hai đều duyệt qua cây DOM. Sự khác biệt như sau:

bố mẹ()

  • Bắt đầu với phần tử mẹ
  • Di chuyển lên cây DOM và trả về tất cả các tổ tiên phù hợp với biểu thức đã truyền
  • Đối tượng jQuery trả về chứa không hoặc nhiều hơn một phần tử

gần nhất()

  • Bắt đầu với phần tử hiện tại
  • Di chuyển lên cây DOM và trả về tổ tiên đầu tiên phù hợp với biểu thức đã truyền
  • Đối tượng jQuery trả về chứa không hoặc một phần tử

Các phương pháp liên quan khác:

  • parent () - trả về phần tử cha trực tiếp của phần tử đã chọn
  • cha mẹUntil () - trả về tất cả các phần tử tổ tiên giữa hai đối số đã cho


Cú pháp

$(selector).parents(filter)

Parameter Description
filter Optional. Specifies a selector expression to narrow down the search for ancestors

Note: To return multiple ancestors, separate each expression with a comma.

Hãy tự mình thử - Ví dụ


Cách sử dụng tham số bộ lọc để trả về tất cả tổ tiên của <span> là các phần tử <ul>.


Cách sử dụng tham số bộ lọc để trả về tất cả tổ tiên của <span> là phần tử <li> và <div>.


Một phần trình diễn cho biết tổ tiên của một phần tử <span> thực sự là ai.


❮ Phương thức duyệt jQuery