Định nghĩa và sử dụng
- .parentsUntil(): Lấy các thành phần tổ tiên của thành phần trong những thành phần phù hợp, lấy đến khi gặp thành phần có trong bộ lọc thì dừng lại.
Cấu trúc
- Đã được thêm vào từ phiên bản 1.0
Lấy các thành phần tổ tiên, lấy đến khi gặp thành phần có trong bộ lọc thì dừng lại.
$('li').parentsUntil(".list");
.parentsUntil("bộ chọn","bộ lọc")
Lấy các thành phần tổ tiên, lấy đến khi gặp thành phần có trong bộ lọc thì dừng lại, nếu ngay tại thành phần tổ tiên có thêm bộ chọn phù hợp thì thành phần này cũng sẽ được lấy.
$('li').parentsUntil(".test",".parent");
.parentsUntil("Bộ lọc")
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').parentsUntil('.list').css('border','1px solid red');
});
</script>
</head>
<body>
<ul class="list">
<li>li thứ nhất</li>
<li>li thứ hai
<ul>
<li>li thứ hai 01</li>
<li>li thứ hai 02</li>
<li>li thứ hai 03</li>
</ul>
</li>
<li>li thứ ba</li>
<li>li thứ tư
<ul class="list">
<li>li thứ tư 01</li>
<li>li thứ tư 02</li>
<li>li thứ tư 03</li>
</ul>
</li>
<li>li thứ năm</li>
</ul>
</body>
</html>
Hiển thị trình duyệt:
Lấy các thành phần tổ tiên của thành phần li, tuy nhiên không chọn từ thành phần tổ tiên nào có class="list" trở lên.
So sánh code HTML trước và sau khi có jQuery:
| Trước khi có jQuery | Sau khi có jQuery |
|---|---|
<ul class="list"> |
<ul class="list"> |
.parentsUntil("bộ chọn","bộ lọc")
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').parentsUntil($('ul.list'),'.test').css('border','1px solid red');
});
</script>
</head>
<body>
<ul class="list">
<li>li thứ nhất</li>
<li>li thứ hai
<ul>
<li>li thứ hai 01</li>
<li>li thứ hai 02</li>
<li>li thứ hai 03</li>
</ul>
</li>
<li>li thứ ba</li>
<li class="list test">li thứ tư
<ul>
<li>li thứ tư 01</li>
<li>li thứ tư 02</li>
<li>li thứ tư 03</li>
</ul>
</li>
<li>li thứ năm</li>
</ul>
</body>
</html>
Hiển thị trình duyệt:
Lấy các thành phần tổ tiên của thành phần li, giới hạn tại thành phần tổ tiên có class="test", chọn luôn cả thành phần tổ tiên nào có class="list".
So sánh code HTML trước và sau khi có jQuery:
| Trước khi có jQuery | Sau khi có jQuery |
|---|---|
<ul class="list"> |
<ul class="list"> |