next

« Обратно к списку traversing-функций

[редактировать]

next( [выражение] )

Получает набор элементов, содержащий уникальные родственные элементы, следующие непосредственно за указанным элементом.
next возвращает лишь ближайший родственный элемент для каждого элемента, не все элементы, а именно следующий непосредственно за нужным. Если нужны все элементы, то используйте nextAll.
Также можете указать выражение, с помощью которого можно отфильтровать возвращаемый набор элементов.
Аргументы:

выражение (необязательно) Строка
Выражение, с помощью которого можно отфильтровать возвращаемый набор элементов.
Примеры:

Поиск ближайшего родственного элемента каждой неактивной кнопки (следующий элемент за кнопкой) и изменение его текста на «this button is disabled».
$("button[disabled]").next().text("this button is disabled");
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>

  <script>
  $(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>
Поиск ближайшего родственного элемента каждого параграфа (следующий элемент за параграфом), который имеет класс «selected».
$("p").next(".selected").css("background", "yellow");
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>

  <script>
  $(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>
Name Type