Định nghĩa và sử dụng
- .siblings(): Lấy thành phần con cùng cấp của mỗi thành phần trong một bộ chọn phù hợp.
- Chú ý là không chọn chính nó.
Cấu trúc
- Đã được thêm vào từ phiên bản 1.0
Tìm tất cả các anh chị em có cùng class là bộ chọn.
$('li.test').siblings('.selected');
.siblings()
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
$('.second').siblings().css("background","yellow");
});
</script>
</head>
<body>
<ul>
<li>Thành phần li 01</li>
<li class="second">Thành phần li 02</li>
<li>Thành phần li 03</li>
<li>Thành phần li 04</li>
</ul>
</body>
</html>
Hiển thị trình duyệt:
Ta thấy tất cả các thành phần anh chị em cùng cấp với "second" đều đã được chọn, riêng chính nó thì không.
So sánh code HTML trước và sau khi có jQuery:
| Trước khi có jQuery | Sau khi có jQuery |
|---|---|
<ul> |
<ul> |
Ví dụ thêm
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
$('.test').siblings().css("background","yellow");
});
</script>
</head>
<body>
<ul>
<li>Thành phần li 01</li>
<li class="test">Thành phần li 02</li>
<li>Thành phần li 03</li>
<li>Thành phần li 04</li>
<li class="test">Thành phần li 05</li>
</ul>
</body>
</html>
Hiển thị trình duyệt:
Ta thấy tất cả các thành phần đều đã được chọn, lý do vì thành phần test thứ nhất đã chọn các anh chị em của nó (chọn cả thành phần test thứ 2), ngoại trừ chính nó, đến thành phần test thứ 2 đã chọn các anh chị em của nó (chọn cả thành phần test thứ nhất), đó cũng là lý do các thành phần đã đc chọn.
So sánh code HTML trước và sau khi có jQuery:
| Trước khi có jQuery | Sau khi có jQuery |
|---|---|
<ul> |
<ul> |
.siblings(Bộ chọn)
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
$('li').siblings('.second').css("background","yellow");
});
</script>
</head>
<body>
<ul>
<li>Thành phần li 01</li>
<li class="second">Thành phần li 02</li>
<li>Thành phần li 03</li>
<li>Thành phần li 04</li>
</ul>
</body>
</html>
Hiển thị trình duyệt:
Ta thấy tất cả các thành phần anh chị em cùng cấp với "second" đều đã được chọn, riêng chính nó thì không.
So sánh code HTML trước và sau khi có jQuery:
| Trước khi có jQuery | Sau khi có jQuery |
|---|---|
<ul> |
<ul> |