Home >>jQuery Tutorial >jQuery nextAll() Method

jQuery nextAll() Method

jQuery nextAll() Method

jQuery nextAll() method in jQuery is used to returns all next sibling elements of the selected element that share the same parent.

Syntax:
$(selector).nextAll(filter)

Parameter Values

Parameter Description
filter It is an Optional parameter and is used to specifies a selector expression to narrow down the search for next siblings and separate each expression with a comma.
Here is an Example of jQuery nextAll() Method:

<html>
<head>
<style>
.siblings * { 
display: block;
border: 2px solid lightgrey;
color: #53f5a7;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("li.start").nextAll().css({"color": "red", "border": "2px solid #1ddb7f"});
});
</script>
</head>
<body>
<div style="width:500px;" class="siblings">
<ul>ul (parent)  
<li>li (sibling)</li>
<li>li (sibling)</li>
<li class="start">li (sibling with class name "start")</li>
<li>li (the next sibling of li with class name "start")</li>
<li>li (the next sibling of li with class name "start")</li>
<li>li (the next sibling of li with class name "start")</li>
</ul>   
</div>
<p>In this example, we return all elements that are the next siblings of the li element with class name "start".</p>
</body>
</html>

Output:
    ul (parent)
  • li (sibling)
  • li (sibling)
  • li (sibling with class name "start")
  • li (the next sibling of li with class name "start")
  • li (the next sibling of li with class name "start")
  • li (the next sibling of li with class name "start")

In this example, we return all elements that are the next siblings of the li element with class name "start".