Home >>jQuery Tutorial >jQuery next() Method

jQuery next() Method

jQuery next() Method

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

Syntax:
$(selector).next(filter)

Parameter Values

Parameter Description
filter It is an Optional parameter and is used to specifies a selector expression to narrow down the next sibling search
Here is an Example of jQuery next() Method:

<html>
<head>
<style>
.siblings * { 
display: block;
border: 2px solid #c1f7dd;
color: #c1f7dd;
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").next().css({"color": "red", "border": "2px solid #34eb92"});
});
</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 (sibling)</li>
</ul>   
</div>
</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 (sibling)