.nextAll( [selector ] )Возвращает: jQuery
Описание: Получить все последующие соседние элементы каждого элемента в наборе сопоставленных элементов, необязательно отфильтровав их по селектору.
-
версия добавлена: 1.2.nextAll( [selector ] )
- selectorТип: СтрокаСтрока, содержащая выражение селектора для сопоставления элементов.
-
Учитывая объект jQuery, представляющий набор элементов DOM, метод .nextAll() позволяет нам искать потомков этих элементов в дереве DOM и создавать новый объект 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" ).nextAll().css( "background-color", "red" );
Результат этого вызова — красный фон за элементами 4 и 5. Поскольку мы не предоставляем выражение селектора, эти последующие элементы однозначно включаются в состав объекта. Если бы мы предоставили его, элементы проверялись бы на соответствие, прежде чем они были бы включены.
Примеры:
Найти все div после первого и дать им класс.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>nextAll demo</title>
<style>
div {
width: 80px;
height: 80px;
background: #abc;
border: 2px solid black;
margin: 10px;
float: left;
}
div.after {
border-color: red;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<div>first</div>
<div>sibling<div>child</div></div>
<div>sibling</div>
<div>sibling</div>
<script>
$( "div" ).first().nextAll().addClass( "after" );
</script>
</body>
</html> Демо:
Найти все абзацы после второго дочернего элемента в теле документа и дать им класс.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>nextAll demo</title>
<style>
div, p {
width: 60px;
height: 60px;
background: #abc;
border: 2px solid black;
margin: 10px;
float: left;
}
.after {
border-color: red;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<p>p</p>
<div>div</div>
<p>p</p>
<p>p</p>
<div>div</div>
<p>p</p>
<div>div</div>
<script>
$( ":nth-child(1)" ).nextAll( "p" ).addClass( "after" );
</script>
</body>
</html> 
