Định nghĩa và sử dụng
- tag.prevUntil('bộ chọn'): xác định tất cả các thành phần cùng cấp ngay trước 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').prevUntil('.test');
- Đã được thêm vào từ phiên bản 1.6
$('p').prevUntil('div');
.prevUntil('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').prevUntil('.test').css('border','1px solid red');
});
</script>
</head>
<body>
<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>
<p>Thành phần p</p>
</body>
</html>
Hiển thị trình duyệt:
Ta thấy $('p').prevUntil('.test') đã xác định các thành phần cùng cấp ngay trước 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 |
|---|---|
<ul> |
<ul> |
.prevUntil('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:last').prevUntil('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>
<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>
<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').prevUntil('div') đã xác định các thành phần cùng cấp ngay trước 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> |