Описание: Возвращает следующих сразу братьев каждого элемента в наборе соответствующих элементов, опционально отфильтрованных селектором.
.next( [ селектор ] )
Добавлена в версию: 1.0
селектор
Строка, содержащая выражение для выбора соответствующих элементов.
Данный объект jQuery представляет набор элементов DOM, метод .next() позволяет нам искать в непосредственно следующих братьях этих элементов в дереве DOM и создает новый объект jQuery из соответствующих элементов.
Метод опционально принимает выражение выбора того же типа, что мы можем передать в функцию $().
Если непосредственно следующие братья соответствуют селектору,
они остаются в ново построенном объекте jQuery, в противном случае не включаются в него.
Рассмотрим страницу с простым списком на ней:
<ul> <li>list item 1</li> <li>list item 2</li> <li class="third-item">list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul>
Если мы начнем с третьего пункта, мы можем найти элемент, который следует сразу после него:
$('li.third-item').next().css('background-color', 'red');
Результатом данного вызова является красный фон пункта 4. Так как мы не поставляем выражение выбора, то следующий элемент однозначно будет включен как часть объекта. Если бы мы поставили выражение выбора, элемент будет проверяться на соответствие перед его включением в новый объект jQuery.
Примеры
Пример 1
Поиск ближайшего родственного элемента каждой неактивной кнопки (следующий элемент за кнопкой) и изменение его текста на «this button is disabled».Пример 1 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function(){ $("button[disabled]").next().text("this button is disabled"); }); </script> <style> span { color:blue; font-weight:bold; } button { width:100px; } </style> </head> <body> <div><button disabled="disabled">First</button> - <span></span></div> <div><button>Second</button> - <span></span></div> <div><button disabled="disabled">Third</button> - <span></span></div> </body> </html>
Пример 2
Поиск ближайшего родственного элемента каждого параграфа (следующий элемент за параграфом), который имеет класс «selected».Пример 2 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function(){ $("p").next(".selected").css("background", "yellow"); }); </script> </head> <body> <p>Hello</p> <p class="selected">Hello Again</p> <div><span>And Again</span></div> </body> </html>
Была ли эта информация полезной?
