Người Viết : ViKiMi Editor

Duyệt tìm kiếm phần tử ANH EM tiếp theo Của Phần Tử được chọn trên cây DOM ( jQuery )
Duyệt các phần tử ANH EM của một phần tử được chọn trên cây DOM khá dễ dàng với jQuery. Không chỉ cho phép duyệt tất cả ANH EM, duyệt phía trước của một phần tử được chọn, jQuery còn cho phép bạn duyệt ANH EM tiếp theo của phần tử được chọn trên Cây DOM. Do đó, thiết kế sử dụng jQuery sẽ đem lại hiệu quả, hiệu suất rất tốt so với thông thường.
Việc tận dụng xử lý Clients giúp cho Website tối ưu.
Thư viện jQuery là một lựa chọn cho phép tăng cường các xử lý phía Clients.
Nhờ điều này, chúng ta sẽ có một Website có tốc độ cao, giao diện thân thiện.
Hầu hết, sự lựa chọn dành cho jQuery là khá hài lòng.
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 Next()
Phương thức này cho phép duyệt tìm kiếm phần tử tiếp theo của phần tử được chọn trên cây DOM
CÚ PHÁP ::
$( SELECTOR ). next();
+ Phương thức này tương đối giống phương thức Prev

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 phần tử ANH EM tiếp theo trên cây DOM
* của Phần Tử H2, H1. Và tạo kiểu CSS cho chúng
*/
$("H2").next().css({"color": "red", "border": "2px solid red"});
$("H1").next().css({"color": "blue", "border": "2px solid blue"});
});
</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 phần tử ANH EM tiếp theo của H2 thêm kiểu CSS với màu đỏ
+ Tìm kiếm phần tử ANH EM tiếp theo của H1 thêm kiểu CSS với màu xanh
Như vậy, thật dễ dàng thao tác với các phần tử ANH EM trên cây DOM của một phần tử được chọn. Việc có nhiều khả năng thao tác làm việc trên cây DOM giúp bạn có thể thấy cách làm việc với những phần tử thiết kế của Website. Và khi đã quen với vấn để này, bạn chắc chắn có cách làm việc khoa học hơn thay vì không đưa ra được một lộ trình thiết kế khoa học.
+ Phương thức Next cho phép DUYỆT phần tử ANH EM tiếp theo của phần tử được chọn trên cây DOM