Người Viết : ViKiMi Editor

Phương thức pre(), preAll(), preUntil() Duyệt các phần tử ANH EM phía trước phần tử chọn
Cung cấp khả năng duyệt tìm kiếm tất cả các phần tử Anh Em của một phần tử được chọn, jQuery mang lại rất nhiều phương thức cho phép sử dụng với nhiều cách khác nhau. Không chỉ cung cấp phương thức Siblings() , chúng ta còn có những phương thức duyệt tìm kiếm những phần tử ANH EM trước của một phần tử được chọn trên cây DOM & nhiều lựa chọn khác.
Được cung cấp những phương thức tiện dụng có thể cho phép làm việc nhiều cách khác nhau trên cây DOM. Có thể nói jQuery đã giúp rất nhiều trong việc thiết kế một Website hoàn chỉnh, dễ dàng.
Những phương thức cho phép duyệt phần tử ANH EM phía trước của phần tử được chọn :
+ Prev() Method
+ PrevAll() Method
+ PrevUntil() Method
A ] PHƯƠNG THỨC Prev()
Phương thức này cho phép trả về phần tử ANH EM phía trước của một phần tử được chọn.

CÚ PHÁP :
+ $( SELECTOR ). prev()
Example ::
<!DOCTYPE html>
<html>
<head>
<style>
/** Tạo kiểu CSS cho tất cả phần tử
* bên trong .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(){
/** Sử dụng phương thức Prev() duyệt phần tử ANH EM
* phía trước của H2 & tạo kiểu CSS cho phần tử ANH EM
* đã tìm kiếm được
*/
$("h2").prev().css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body class= "ANHEM" >
<div>Div (Phần Tử Cha)
<p> P
<span>Span</span>
</p>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
</div>
</body>
</html>
Hình Ảnh Kết Quả :

B ] PHƯƠNG THỨC PrevAll()
Phương thức này cho phép trả về tất cả phần tử ANH EM phía trước của một phần tử được chọn.
CÚ PHÁP :
+ $( SELECTOR ). prevAll()
Example ::
<!DOCTYPE html>
<html>
<head>
<style>
/** Tạo kiểu CSS cho tất cả phần tử
* bên trong .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(){
/** Sử dụng phương thức PrevAll() duyệt
* tất cả phần tử ANH EM phía trước
* của H2 & tạo kiểu CSS cho tất cả phần tử
* ANH EM đã tìm kiếm được
*/
$("h2").prevAll().css({"color": "blue", "border": "2px solid blue"});
});
</script>
</head>
<body class= "ANHEM" >
<div>Div (Phần Tử Cha)
<h1>H1 </h1>
<p>P
<span> Span </span>
</p>
<span> Span </span>
<h2>H2 </h2>
<h3>H3 </h3>
<p>P </p>
</div>
</body>
</html>
Hình Anh Kết Quả :

C ] PHƯƠNG THỨC PrevUntil()
Phương thức này cho phép trả về tất cả phần tử ANH EM phía trước giữa 2 đối số đã cho.
CÚ PHÁP :
+ $( SELECTOR ). prevAll( Param )
[Param] : Bắt buộc
Example ::
Duyệt tất cả phần tử Anh Em phía trước giữa 2 đối số H2, H1
<!DOCTYPE html>
<html>
<head>
<style>
/** Tạo kiểu CSS cho tất cả phần tử
* bên trong .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>
/** Duyệt tìm kiếm tất cả phần tử Anh Em
* phía trước Giữa 2 đối số đã cho là H2 & H1
*/
$(document).ready(function(){
$("h2").prevUntil("h1").css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body class= "ANHEM" >
<div>Div (Phần Tử Cha)
<h1>H1 </h1>
<p>P
<span>Span </span>
</p>
<span>Span </span>
<h2>H2 </h2>
<p>P
<span>Span </span>
</p>
</div>
</body>
</html>
Hình Ảnh Kết Quả :

Như vậy, cả 3 phương thức Prev(), PrevAll(), PrevUntil() đều dễ dàng sử dụng. Cách thức làm việc có thể áp dụng không khó khăn, có thể đưa đến kết quả thiết kế rất ổn định. Có thể giúp lập trình viên làm việc quản lý phát triển một Website tốt. Duyệt các phần tử Anh Em phía trước của phần tử được chọn với 3 phương thức kể trên rất hữu hiệu.
+ Prev() ; PrevAll() ; PrevUntil() ;