Bài jQuery 23: Phương thức truyền tải qua Siblin

0
149

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 qua Sibling.

Truyền tải ngang trong cây DOM

Trong mối quan hệ logic, Sibling hay còn gọi là anh chị em là những phần tử có chung cha mẹ.

jQuery cung cấp một số phương thức như Siblings(), next (), nextAll(), nextUntil(), prev() mà bạn có thể sử dụng để di chuyển ngang trong cây DOM.

Phương thức siblings()

Phương thức jQuery siblings() được sử dụng để lấy các phần tử là anh chị em của phần tử được chọn.

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

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 siblings() để lọc các tìm kiếm của anh chị em. Ví dụ sau sẽ chỉ áp dụng đường viền xung quanh anh chị em của <p> là các phần tử <ul>.

Phương thức next()

Phương thức jQuery next() được sử dụng để có được các phần tử anh chị em ngay sau phần tử đó, tức là phần tử anh chị tiếp theo của phần tử được chọn. Ví dụ sau đây sẽ lầm nổi bật anh chị em tiếp theo của phần tử <p> là phần tử <ul>.

Phương thức nextAll()

Phương thức jQuery nextAll() được sử dụng để lấy tất cả các anh chị em ở phía sau của phần tử được chọn.

Ví dụ sau sẽ làm nổi bật tất cả anh chị em của phần tử <p> bên cạnh nó.

Phương thức nextUntil()

Phương thức jQuery nextUntil() được sử dụng để có được tất cả các phần tử anh chị em phía sau nhưng không bao gồm phần tử nằm trong selector. Nói một cách đơn giản, nó trả về tất cả các phần tử anh chị em tiếp theo giữa hai phần tử đã cho trong hệ thống phân cấp DOM.

Ví dụ sau sẽ làm nổi bật tất cả các phần tử anh chị em sau của phần tử <h1> không bao gồm phần tử <ul> tức là làm nổi bật cả phần tử <p>.

Phương thức prev()

Phương thức prev() được sử dụng để có được các phần tử anh chị em ngay trước nó. Ví dụ sau đây sẽ làm nổi bật phần tử anh chị em đứng trước phần tử <ul> là phần tử <p>.

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 qua Sibling. Trong bài học tiếp theo chúng ta sẽ cùng nhau tìm hiểu về Bộ lọc 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