Người Viết : ViKiMi Editor
Phương thức NextALL( ) Duyệt / Tìm Kiếm tất cả Phần tử ANH EM tiếp theo của 1 phần tử
Để sử dụng các phương thức duyệt các phần tử Anh Em của một phần tử được chọn, có rất nhiều cách khác nhau và một trong những cách phổ biến là nextALL. Phương thức chúng ta đề cập đến cho kết quả trả về là tất cả những phần tử Anh Em tiếp theo của phần tử được chọn. Phương thức nextALL có thể cũng là một lựa chọn khi bạn thiết kế Website.
Duyệt / Tìm kiếm trên cây DOM là công việc rất quen thuộc khi xây dựng Website. Công việc này luôn diễn ra dù bạn có dùng một Nền tảng bất kỳ nào, một mô hình bất kỳ nào, hay bất kỳ CMS nào.
Duyệt / Tìm kiếm các phần tử ANH EM trên cây DOM là một chủ đề được bàn tới.
Bạn có thể Duyệt / Tìm kiếm phía trước hay Tiếp theo, Hoặc tìm kiếm cụ thể phần tử ANH EM theo các tham số cụ thể truyền vào Bộ Lọc.
THƯ VIỆN jQuery cung cấp các phương thức DUYỆT các phần tử ANH EM tiếp theo trên cây DOM :
+ Next() Method
+ NextAll() Method
+ NextUntil() Method
I ] PHƯƠNG THỨC NextAll()
Phương thức này cho phép duyệt / tìm kiếm tất cả phần tử ANH EM tiếp theo của phần tử được chọn trên cây DOM
CÚ PHÁP ::
$( SELECTOR ). nextAll();
+ Phương thức này tương đối giống phương thức PrevALL
Example 1 ::
<!DOCTYPE html>
<html>
<head>
<style>
/** Tạo kiểu CSS cho tất cả
* Các phần tử bên trong Class .ANHEM
*/
.ANHEM * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
/* Tìm Tất Cả phần tử ANH EM tiếp theo trên cây DOM
* của Phần Tử H1, H2. Và tạo kiểu CSS cho chúng
*/
$("H1").nextAll().css({"color": "blue", "border": "2px solid blue"});
$("H2").nextAll().css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body class= "ANHEM" >
<div> Div (Phần Tử Cha)
<h1> H1 </h1>
<h2> H2 </h2>
<p> P
<span> Span </span>
</p>
<h3> H3 </h3>
<h4> H4 </h4>
</div>
</body>
</html>
Hình Ảnh Kết Quả ::
+ Tìm kiếm Tất cả phần tử ANH EM tiếp theo của H1 thêm kiểu CSS với màu xanh
+ Tìm kiếm Tất cả phần tử ANH EM tiếp theo của H2 thêm kiểu CSS với màu đỏ
Như vậy, thật dễ dàng thao tác với Tất cả phần tử ANH EM Tiếp Theo trên cây DOM của một phần tử được chọn. Các Khả năng mà jQuery mang lại thực sự rất tốt + Kết hợp với một cách quản lý thiết kế giao diện phù hợp >> Bạn sẽ xây dựng một Website cách bài bản hiện đại, với các Modul đạt chuẩn. Từ đó có thể thiết kế Website tốt hơn với các yêu cầu công nghệ khác nhau.
+ Phương thức NextAll cho phép DUYỆT tất cả phần tử ANH EM tiếp theo của phần tử được chọn trên cây DOM
