Định nghĩa và sử dụng
- tag.nextUntil('bộ chọn'): xác định tất cả các thành phần cùng cấp ngay kế tiếp thành phần được chọn (tag) và kết thúc việc này ngay tại thành phần (bộ chọn) có trong .nextAll().
Cấu trúc
- Đã được thêm vào từ phiên bản 1.4
$('p').nextUntil('.test');
- Đã được thêm vào từ phiên bản 1.6
$('p').nextUntil('div');
.nextUntil('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(){
$('p').nextUntil('.test').css('border','1px solid red');
});
</script>
</head>
<body>
<p>Thành phần p</p>
<ul>
<li>Thành phần li</li>
<li>Thành phần li</li>
</ul>
<div>Thành phần div</div>
<div class="test">Thành phần div có class test</div>
<div>Thành phần div</div>
<div>Thành phần div</div>
</body>
</html>
Hiển thị trình duyệt:
Ta thấy $('p').nextUntil('.test') đã xác định các thành phần cùng cấp ngay sau thành phần p và kết thúc ngay trước thành phần có class="test".
So sánh code HTML trước và sau khi có jQuery:
| Trước khi có jQuery | Sau khi có jQuery |
|---|---|
<p>Thành phần p</p> |
<p>Thành phần p</p> |
.nextUntil('Thành phầ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(){
$('p:first').nextUntil('div').css('color','red');
});
</script>
</head>
<body>
<p>Thành phần p</p>
<ul>
<li>Thành phần li</li>
<li>Thành phần li</li>
</ul>
<p>Thành phần p</p>
<ul>
<li>Thành phần li</li>
<li>Thành phần li</li>
</ul>
<div>Thành phần div</div>
<p>Thành phần p</p>
<ul>
<li>Thành phần li</li>
<li>Thành phần li</li>
</ul>
</body>
</html>
Hiển thị trình duyệt:
Ta thấy $('p:first').nextUntil('div') đã xác định các thành phần cùng cấp ngay sau thành phần p đầu tiên và kết thúc ngay trước thành phần div.
So sánh code HTML trước và sau khi có jQuery:
| Trước khi có jQuery | Sau khi có jQuery |
|---|---|
<p>Thành phần p</p> |
<p>Thành phần p</p> |