Truy vấn - Đồng loại

Các anh em có cùng một phần tử cha.

Bằng jQuery, bạn có thể lặp lại qua các phần tử anh em của phần tử trong cây DOM.

Lặp lại ngang qua cây DOM

Có rất nhiều phương pháp hữu ích để chúng ta lặp lại ngang qua cây DOM:

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

Phương pháp siblings() của jQuery

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

Dưới đây là ví dụ trả về tất cả các phần tử anh em của <h2>:

Mô hình

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

Thử nghiệm trực tiếp

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

Dưới đây là ví dụ trả về tất cả các phần tử <p> của các phần tử anh em thuộc về <h2>:

Mô hình

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

Thử nghiệm trực tiếp

Phương pháp next() của jQuery

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

Phương pháp này chỉ trả về một phần tử.

Dưới đây là ví dụ trả về phần tử anh em tiếp theo của <h2>:

Mô hình

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

Thử nghiệm trực tiếp

Phương pháp nextAll() của jQuery

Phương pháp nextAll() trả về tất cả các phần tử anh em theo sau của phần tử được chọn.

Dưới đây là ví dụ trả về tất cả các phần tử anh em theo sau của phần tử <h2>:

Mô hình

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

Thử nghiệm trực tiếp

Phương pháp nextUntil() của jQuery

Phương pháp nextUntil() trả về tất cả các phần tử anh em theo sau hai tham số được chỉ định.

Dưới đây là ví dụ trả về tất cả các phần tử anh em giữa các phần tử <h2> và <h6>:

Mô hình

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

Thử nghiệm trực tiếp

Phương pháp prev(), prevAll() & prevUntil() của jQuery

prev(), prevAll() và prevUntil() hoạt động theo cách tương tự như các phương pháp trên, nhưng theo hướng ngược lại: chúng trả về các phần tử anh em trước (trong cây DOM, di chuyển theo các phần tử anh em theo hướng sau,而不是 trước).

Hướng dẫn tham khảo jQuery lặp lại

Nếu bạn muốn biết tất cả các phương pháp lặp lại của jQuery, hãy truy cập trang web của chúng tôi Hướng dẫn tham khảo jQuery lặp lại。