Previous Lesson Next Lesson

.nextUntil() trong jQuery

Định nghĩa và sử dụng .nextUntil() trong jQuery

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 .nextUntil() trong jQuery

Đã được thêm vào từ phiên bản 1.4

.nextUntil('Bộ chọn')

$('p').nextUntil('.test');

Đã được thêm vào từ phiên bản 1.6

.nextUntil('Thành phần')

$('p').nextUntil('div');

.nextUntil('Bộ chọn')

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://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".

.nextUntil('Thành phần')

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://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.

Previous Lesson Next Lesson

Preview

Viết câu trả lời

0 Bình luận

bắt đầu chủ đề từ ·

@ ·