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

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

Cấu trúc

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

.next()

$('p').next();

.next('Bộ chọn')

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

.next()

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').next().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 thành phần li cùng cấp ngay sau thành phần li sử dụng .next() đã đượ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>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>
<script>
$(function(){
    $('li.second').next().css('border','1px solid blue');
});
</script>
</head>

<body>
<ul>
<li>li thứ nhất</li>
<li class="second">li thứ hai</li>
<li>
    <ul>
        <li>li thứ tư</li>
        <li>li thứ năm</li>
    </ul>
</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 chỉ có thành phần li cùng cấp ngay sau thành phần li có sử dụng .next() mới được thêm border, các thành phần con thì không được.

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>
<ul>
<li>li thứ tư</li>
<li>li thứ năm</li>
</ul>
</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="border: 1px solid blue;">
<ul>
<li>li thứ tư</li>
<li>li thứ năm</li>
</ul>
</li>
<li>li thứ tư</li>
<li>li thứ năm</li>
</ul>

.next('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').next('.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 .next('.test') ta đã xác định cụ thể một thành phần 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>