Tự học JQuery - Traversing - Bài 4 - Nhánh bên – Sibling

Xem Mục lục lập trình JQuery

Nhánh bên( nhánh anh em) là các phần tủ có chung cha mẹ.

Với jQuery bạn có thể tra các nhánh bên trong sơ đồ cây DOM để tìm phần tử anh em của 01 phần tử.

---

Duyệt các nhánh trong sơ đồ DOM

Có nhiều phương thức jQuery hữu dụng dùng để duyệt nhánh trong sơ đồ DOM:

• siblings()
• next()
• nextAll()
• nextUntil()
• prev()
• prevAll()
• prevUntil()
  

---

Phương thức jQuery siblings()

Phương thức siblings() trả về tất cả các phần tử anh em của phần tử đã chọn.

Ví dụ sau trả về tất cả phần tử anh em của thẻ <h2>

$(document).ready(function(){
    $("h2").siblings();
});

Bạn cũng có thể sử dụng 01 tham số tùy chọn để lọc kết quả tìm các phần tử anh em.

Ví dụ sau trả về tất cả phần tử anh em của thẻ <h2> là thẻ <p>

$(document).ready(function(){
    $("h2").siblings("p");
});

---

Phương thức jQuery next()

Phương thức next() trả về phần tử anh em kế tiếp của phần tử đã chọn.

Ví dụ sau trả về phần tử anh em kế tiếp của thẻ <h2>

$(document).ready(function(){
    $("h2").next();
});

---

Phương thức jQuery nextAll()

Phương thức nextAll() trả về tất cả phần tử anh em kế tiếp của phần tử đã chọn.

Ví dụ sau trả về tất cả phần tử anh em kế tiếp của thẻ <h2>

$(document).ready(function(){
    $("h2").nextAll();
});

---

Phương thức jQuery nextUntil()

Phương thức nextUntil() trả về tất cả phần tử anh em kế tiếp giữa 01 tham số.

Ví dụ sau trả về tất cả phần tử anh em giữa 01 thẻ <h2> và 01 thẻ <h6>

$(document).ready(function(){
    $("h2").nextUntil("h6");
});

---

Phương thức jQuery prev(), prevAll() và prevUntil()

Các phương thức prev(), prevAll() và prevUntil() hoạt động giống hệt các phương thức trên nhưng với tính năng ngược lại: chúng trả về các phần tử anh em trước đó trong sơ đồ DOM( thay vì kế tiếp).

Nếu vẫn chưa rõ các bạn xem thêm video clip sau:

Xem Mục lục lập trình JQuery

By #drM