Bài jQuery 21: Phương thức truyền tải Ancestor

0
224

Xin chào các bạn, trong bài học ngày hôm nay mình sẽ giới thiệu đến các bạn phương thức truyền tải Ancestor trong jQuery.

Truyền tải qua cây DOM

Trong các mối quan hệ logic, ancestorcha mẹ, ông bà, ông cố, v.v.

jQuery cung cấp các phương thức hữu ích như parent(), parents()parentsUntil() mà bạn có thể sử dụng để duyệt qua cây DOM một hoặc nhiều cấp để dễ dàng lấy ra các phần tử cha mẹ hoặc tổ tiên trong cấu trúc phân cấp.

Phương thức parent()

Phương thức parent() được sử dụng để lấy ra trực tiếp phần tử cha mẹ của phần tử được chọn.

Ví dụ sau đây sẽ làm nổi bật phần tử cha trực tiếp của <li><ul> bằng cách thêm class .highlight trong chương trình.

Phương thức parents()

Phương thức parents() được sử dụng để lấy ra ancestors  (tổ tiên) của phần tử được chọn.

Ví dụ sau sẽ thêm một border xung quanh tất cả các phần tử tổ tiên của <li> là các phần tử <ul>, <div>, <body><html>.

Bạn có thể tùy ý bao gồm một hoặc nhiều selector làm tham số trong phương thức parents() để lọc kết tìm kiếm của các phần tử tổ tiên. Ví dụ sau sẽ áp dụng border xung quanh tất cả phần tử tổ tiên của <li> là các phần tử <div>.

Phương thức parentsUntil()

Phương thức jQuery ParentUntil() được sử dụng để lấy ra tất cả các phần tử tổ tiên nhưng không bao gồm các phần tử có trong bộ lọc. Nói một cách đơn giản, chúng ta có thể nói nó trả về tất cả các phần tử tổ tiên giữa hai phần tử đã cho trong hệ thống phân cấp DOM.

Ví dụ sau sẽ thêm một border xung quanh tất cả các phần tử tổ tiên của phần tử <li> không bao gồm phần tử <html> tức là thêm phần viền vào phần tử <ul>, <div><body>.

Kết luận

Như vậy trong bài học ngày hôm nay mình đã giới thiệu đến các bạn Phương thức truyền tải Ancestor. Trong bài học tiếp theo chúng ta sẽ cùng nhau tìm hiểu về Phương thức truyền tải Descendant trong jQuery.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây