Người Viết : ViKiMi Editor

Sử dụng NextUntiL Method cho phép Duyệt / Tìm Kiếm các phần tử ANH EM giữa 2 đối số
Tiếp tục khả năng Duyệt / Tìm Kiếm các phần tử ANH EM trên cây DOM sử dụng jQuery. Lần này jQuery mang lại khả năng Duyệt / Tìm Kiếm các phần tử ANH EM tiếp theo nằm giữa 2 đối số đã cho trên cây DOM. Phương thức NextUntil giúp chúng ta thực hiện điều này. Sự bổ sung này thực sự cần thiết để tăng khả năng Duyệt / TÌm kiếm các Phần Tử.
Công việc rất quen thuộc đó là Duyệt / Tìm Kiếm.
Những gì chúng ta cần đó là tối ưu hơn nữa để có kết quả nhanh $ chính xác, Thiết kế những gói, phần tử cách tốt nhất.
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.
Lần này, jQuery cho phép Duyệt / Tìm Kiếm tất cả các phần tử ANH EM tiếp theo nằm giữa 2 đối số đã cho.
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 NextUntil()
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 giữa 2 đối số đã cho trên cây DOM
CÚ PHÁP ::
$( SELECTOR ). nextUntil( [element ] [, filter ] );
$( SELECTOR ). nextUntil( [selector ] [, filter ] );
DANH SÁCH ĐỐI SỐ CỦA NextUntil( )
a ) selector
Type: Selector
Một chuỗi chứa biểu thức bộ chọn để cho biết nơi dừng khớp các phần tử anh chị em theo sau.
b ) element
Type: Element or jQuery
Một nút DOM hoặc đối tượng jQuery cho biết nơi dừng khớp các phần tử anh chị em theo sau.
c ) filter
Type: Selector
Một chuỗi chứa biểu thức bộ chọn để so khớp các phần tử.
+ Phương thức này tương đối giống phương thức PrevUntil
Example 1 ::
<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>nextUntil demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<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>
$(document).ready(function(){
/* Tìm Tất Cả phần tử ANH EM tiếp theo trên cây DOM
* giữa 2 đối số H1 & P. Và tạo kiểu CSS cho chúng
*/
$( "H1" ).nextUntil( "P" ).css( "background-color", "red" );
/* Tìm Tất Cả phần tử ANH EM tiếp theo trên cây DOM
* giữa 2 đối số #term-1 & term3, Sử dụng filter là P.
* Và tạo kiểu CSS cho chúng
*/
var term3 = document.getElementById( "term-3" );
$( "#term-1" ).nextUntil( term3, "P" ).css( {"color": "blue", "border": "2px solid green", "background-color": "green"} );
});
</script>
</head>
<body class= "ANHEM" >
<div> Div (Phần Tử Cha)
<h1 id="term-1"> H1 </h1>
<H2> H2 </H2>
<P> P
<span> Span </span>
</P>
<h3 id="term-3"> 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 giữa 2 đối số H1 & P thêm kiểu CSS màu nền là đỏ
+ Tìm kiếm Tất cả phần tử ANH EM tiếp theo giữa 2 đối số #term-1 & term3, với Filter là P thêm kiểu CSS cho chúng
Như vậy, thật dễ dàng thao tác với Tất cả phần tử ANH EM Tiếp Theo giữa 2 đối số đã cho trên cây DOM. 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 NextUntiL cho phép DUYỆT tất cả phần tử ANH EM tiếp theo nằm giữa 2 đối số đã cho trên cây DOM