.nextAll()

Định nghĩa và sử dụng

.nextAll(): xác định tất cả các thành phần cùng cấp ngay kế tiếp thành phần sử dụng .nextAll().

Cấu trúc

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

$('p').nextAll();

.nextAll('Bộ chọn')

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

.nextAll()

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.second').nextAll().css('background-color','yellow');
});
</script>
</head>

<body>
<ul>
<li>li thứ nhất</li>
<li class="second">li thứ hai</li>
<li>li thứ ba</li>
<li>li thứ tư</li>
<li>li thứ năm</li>
</ul>
</body>
</html>

Hiển thị trình duyệt:

Ta thấy tất cả các thành phần li cùng cấp ngay sau thành phần li sử dụng .nextAll() đã được thêm background-color.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery	Sau khi có jQuery
<ul> <li>li thứ nhất</li> <li class="second">li thứ hai</li> <li>li thứ ba</li> <li>li thứ tư</li> <li>li thứ năm</li> </ul>	<ul> <li>li thứ nhất</li> <li class="second">li thứ hai</li> <li style="background-color: yellow;">li thứ ba</li> <li style="background-color: yellow;">li thứ tư</li> <li style="background-color: yellow;">li thứ năm</li> </ul>

.nextAll('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').nextAll('.test').css('background-color','yellow');
});
</script>
</head>

<body>
<ul>
<li>li thứ nhất</li>
<li>li thứ hai</li>
<li>li thứ ba</li>
<li class="test">li thứ tư</li>
<li>li thứ năm</li>
</ul>
</body>
</html>

Hiển thị trình duyệt:

Với cách sử dụng .nextAll('.test') ta đã xác định cụ thể thành phần có class="test" ngay sau thành phần <li>.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery	Sau khi có jQuery
<ul> <li>li thứ nhất</li> <li>li thứ hai</li> <li>li thứ ba</li> <li class="test">li thứ tư</li> <li>li thứ năm</li> </ul>	<ul> <li>li thứ nhất</li> <li>li thứ hai</li> <li>li thứ ba</li> <li class="test" style="background-color: yellow;">li thứ tư</li> <li>li thứ năm</li> </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>
<style>
p,div {
    border: 1px solid blue;
    display: inline-block;
    height: 80px;
    width: 80px;
}
</style>
<script>
$(function(){
    $(':nth-child(1)').nextAll('p').css('border','1px solid red');
});
</script>
</head>

<body>
<p>Tag p</p>
<div>Tag div</div>
<p>Tag p</p>
<p>Tag p</p>
<div>Tag div</div>
<p>Tag p</p>
<div>Tag div</div>
</body>
</html>

Hiển thị trình duyệt:

$(':nth-child(1)'): chọn thành phần ở vị trí thứ 2 (vị trí đầu ứng với $(':nth-child(0)')).
$(':nth-child(1)').nextAll('p') sẽ xác định các thành phần p ngay sau thành phần ở vị trí thứ 2, tất cả các thành phần thỏa điều kiện này sẽ được thêm border: 1px solid red;

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery	Sau khi có jQuery
<p>Tag p</p> <div>Tag div</div> <p>Tag p</p> <p>Tag p</p> <div>Tag div</div> <p>Tag p</p> <div>Tag div</div>	<p>Tag p</p> <div>Tag div</div> <p style="boder: 1px solid red;">Tag p</p> <p style="boder: 1px solid red;">Tag p</p> <div>Tag div</div> <p style="boder: 1px solid red;">Tag p</p> <div>Tag div</div>

.next()

.nextUntil()