Người Viết : ViKiMi Editor

Thực hiện Duyệt tìm kiếm tất cả phần tử Anh Em của phần tử được chọn sử dụng Siblings Method
Nếu bạn muốn thực hiện duyệt cây DOM sử dụng thư viện jQuery thì điều này là hoàn toàn hợp lý. Thư viện jQuery không chỉ cho phép bạn duyệt tìm phần tử Ancestors, phần tử Descendants, nó còn cho phép bạn duyệt tìm các phần tử Siblings / Anh Em ( cùng cấp ). Đây là khả năng hoàn thiện khả năng duyệt tìm kiếm phần tử của jQuery trên cây DOM.
Với việc cho phép Tìm kiếm các phần tử Siblings / Anh Em ( cùn cấp ) của một phần tử được chọn. jQuery đã mang lại một cách làm việc tiếp theo có thể vận dụng để thiết kế Website hiệu quả. Sự kết hợp khả năng của các ngôn ngữ lập trình sẽ mở rộng cách làm việc của Nhà Phát Triển.
+ Sự kết hợp giữa các nền tảng + Ngôn ngữ PHP + HTML + jQuery + CSS + Database + Tiện ích mở rộng khác nhau khiến cho Website đạt chuẩn hơn.
Phương thức được nhắc đến là Siblings() Method
+ Phương thức này cho phép duyệt ngang trên cây DOM để tìm kiếm các phần tử Anh Em ( cùng cấp ) của một phần tử được chọn
CÚ PHÁP ::
+ $( SELECTOR ). siblings( );
+ $( SELECTOR ). siblings( Param1, Param2, … , ParamN );
[ Param ] : Tham số tuỳ chọn
Phương thức này có thể sử dụng truyền tham số hoặc không.

EXAMPLE :: KHÔNG SỬ DỤNG THAM SỐ
+ Nếu sử dụng phương thức Siblings() không truyền tham số. Kết quả trả về là tất cả Anh Em ( cùng cấp ) với phần tử được chọn
<!DOCTYPE html>
<html>
<head>
<style>
/** Tạo kiểu CSS cho tất cả phần tử
* con bên trong phần tử .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(){
/** Phương thức Siblings không có tham số
* Duyệt tìm kiếm tất cả
* Anh Em ( cùng cấp ) của H1 trên cây DOM
* Sau đó xâu chuỗi phương thức CSS() tạo kiểu
* cho tất cả ANH EM của PT H1
*/
$("h1").siblings().css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body class="AnhEm">
<div>div (parent)
<h1>Phần Tử H1</h1>
<h2>Phần Tử H2</h2>
<h3>Phần Tử H3</h3>
<p>Phần Tử P
<span>Phần Tử Span</span>
</p>
<h4>Phần Tử H4</h4>
<h5>Phần Tử H5</h5>
</div>
</body>
</html>
Hình Ảnh Kết Quả ::

EXAMPLE :: CÓ SỬ DỤNG THAM SỐ
+ Nếu sử dụng phương thức Siblings() có truyền tham số. Kết quả trả về là Anh Em ( cùng cấp ) với phần tử được chọn, dựa trên tham số truyền vào cho bộ lọc.
<!DOCTYPE html>
<html>
<head>
<style>
/** Tạo kiểu CSS cho tất cả phần tử
* con bên trong phần tử .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(){
/** Phương thức Siblings có tham số
* Duyệt tìm kiếm dựa trên tham số truyền vào bộ lọc
* Trả về Anh Em ( cùng cấp ) phù hợp của H1 trên cây DOM
* Sau đó xâu chuỗi phương thức CSS() tạo kiểu
* cho ANH EM của PT H1
*/
$("h1").siblings("h3, #p1, .sibling-h4").css({"color": "red", "border": "2px solid blue"});
});
</script>
</head>
<body class="AnhEm">
<div>div (parent)
<h1>Phần Tử H1</h1>
<h2>Phần Tử H2</h2>
<h3>Phần Tử H3</h3>
<p id="p1">Phần Tử P
<span>Phần Tử Span</span>
</p>
<h4 class="sibling-h4"> Phần Tử H4 </h4>
<h5>Phần Tử H5</h5>
</div>
</body>
</html>
Hình Ảnh Kết Quả ::

Như vậy, Việc duyệt tìm kiếm các phần tử Anh Em ( Cùng cấp ) của một phần tử được chọn trên cây DOM thật dễ dàng. Nhờ khả năng duyệt TRÊN cây DOM dễ dàng mà jQuery được sử dụng rộng rãi. Tăng khả năng làm việc với cây DOM để đưa ra các thiết kế tốt nhất cho Lập Trình Viên.
+ Sự kết hợp giữa các ngôn ngữ là phải có
+ Phương thức Siblings() thực sự cần thiết