jQuery метод .next()

Определение и применение

jQuery метод .next() позволяет получить каждый сестринский элемент, который находится следующим по отношению к текущему элементу в наборе соответствующих элементов.

jQuery синтаксис:

Синтаксис 1.0:

JavaScript
// выбор следующего сестринского элемента
$( selector ).next()

// выбор следующего сестринского элемента с определенным селектором
$( selector ).next( selector )

selector - Selector

Добавлен в версии jQuery

1.0

Значения параметров

Параметр Описание
selector Строка селектор, использующаяся в качестве дополнительного фильтра. Если дополнительно указывается селектор, то выбор элемента (добавление в коллекцию jQuery) осуществляет только в том случае, если он соответствует этому селектору. Необязательный параметр.

Пример использования

Метод .next() — пример 1

Нажмите ▶. Измените JavaScript и запустите пример повторно. Используется jQuery 3.1.1.

index.html
HTML
<ul>
  <li>Первый</li>
  <li>Второй</li>
  <li>Третий</li>
</ul>
<div>
  <p>Параграф внутри &lt;div&gt;</p>
</div>
<p>Параграф внутри &lt;body&gt;</p>
main.js
JavaScript
$(document).ready(function () {
    $('li:first').next().css('color', 'red') // выбираем сестринский элемент, который находится следующим по отношению к первому элементу <li> в документе
    $('p').next().css('color', 'red') // выбираем каждый сестринский элемент, который находится следующим по отношению к элементу <p> в документе
})
style.css
CSS
body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

В этом примере с использованием jQuery метода .next() мы выбираем сестринский элемент, который находится следующим по отношению к первому элементу <li> в документе, и каждый сестринский элемент, который находится следующим по отношению к элементу <p> в документе, и с помощью метода .css() устанавлием цвет текста красный.

Обратите внимание, что стили применились только к элементу <li>, это связано с тем, что у элемента <p>, вложенного в элемент <div> отсутствуют сестринские элементы, а после элемента <p>, вложенного в элемент <body> отсутствуют элементы впринципе.

В следующем примере мы рассмотрим использование метода .next() с дополнительным параметром:

Метод .next() — пример 2

Нажмите ▶. Измените JavaScript и запустите пример повторно. Используется jQuery 3.1.1.

index.html
HTML
<ul>
  <li>Первый</li>
  <li>Второй</li>
  <li>Третий</li>
</ul>
<ul>
  <li>Первый</li>
  <li class="active">Второй</li>
  <li>Третий</li>
</ul>
main.js
JavaScript
$(document).ready(function () {
    $('li:nth-child(1)').next('.active').css('color', 'red') // выбираем сестринский элемент, который находится следующим по отношению к первому дочернему элементу <li> своего родителя, если он соответствует переданному селектору
})
style.css
CSS
body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

В этом примере с использованием jQuery метода .next() мы выбираем каждый сестринский элемент, который находится следующим по отношению к первому дочернему элементу <li> своего родителя, при этом этот элемент должен соответствовать переданному селектору (класс .active).

Обратите внимание на то, что если бы мы не передали строку селектора, то элемент <li> был бы выбран в обоих списках. Результат нашего примера:

Пример использования метода .next() (с дополнительным фильтром)
Пример использования метода .next() (с дополнительным фильтром)