jQuery next() method

The next() method is an inbuilt method in jQuery, which returns the next sibling of the selected element. This method traverses forwards along with the next sibling of DOM elements.

Syntax

This method accepts an optional parameter that is used to specify a selector expression that narrows down the searching of the next sibling.

Let's see some of the illustrations to understand the working of the next() method.

Example1

In this example, there is a div element, including three child elements that are an ul element, a heading h2, and a paragraph element. Here, we are using the next() method to get the next sibling of the h2 element. We are not using the optional parameter of the next() method.

On clicking the given button, the next() method will return the p element, as it is the immediate next sibling of the heading h2.

<!DOCTYPE html>
<html>
<head>
<style>
.main * {
display: block;
font-size: 20px;
position: relative;
border: 2px solid black;
color: black;
padding: 10px;
margin: 17px;
}
</style>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
function fun(){
$(document).ready(function(){
$("h2").next().css({ "font-size": "30px", "color": "blue", "border": "6px dashed blue"});
});
}
</script>
</head>

<body class = "main"> body
<div id = "div1"> div element
<ul> ul element </ul>
<h2> Heading h2 </h2>
<p> Paragraph element </p>
</div>
<button onclick = "fun()"> click me </button>
</body>
</html>

Test it Now

Output

After the execution of the above code, the output will be -

After clicking the given button, the output will be -

Example2

In this example, we are using the optional parameter of the next() method to narrow down the search. Here, there is a div element including multiple children. We are finding the next sibling of the h2 element. There are many h2 heading elements with different siblings. But we are passing the p element as the optional parameter of the next() method. So, the method will only return the p elements that are the immediate next sibling of the h2 element.

<!DOCTYPE html>
<html>
<head>
<style>
.main * { 
  display: block;
  font-size: 20px;
  position: relative;
  border: 2px solid black;
  color: black; 
  padding: 10px;
  margin: 17px;
}
</style>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
function fun(){
$(document).ready(function(){
  $("h2").next("p").css({ "color": "blue", "border": "3px dashed blue"});
});
}
</script>
</head>

<body class = "main"> body
  <div id = "div1"> div element
<h2> Heading h2 </h2>
<ul> ul element </ul>
<h2> Heading h2 </h2>
<p> Paragraph element </p>
<h2> Heading h2 </h2>
<span> span element </span>
	</div>
<button onclick = "fun()"> click me </button>
  </body>
</html>

Test it Now

Output

After the execution of the above code, the output will be -

In the above screenshot, we can notice the siblings of the h2 element. But the method will return only the p element, as we have passed the p element as the optional parameter of the next() method. After clicking the given button, the output will be -

Example3

It is another example of using the next() method. On clicking the given button, the next() method will trigger and start traversing through the DOM elements. The method will return the immediate next sibling of each div element and changes the background-color of corresponding div to red.

<!DOCTYPE html>
<html>
<head>
<style>
div { 
  display: block;
  width: 50px;
  height: 50px;
  font-size: 20px;
  margin: 10px;
  border: 2px solid black;
  float: left;
}
p {
clear: left;
margin: 10px;
}
</style>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){
var current = $("#d1");
current .css( "background-color", "red");
$("button").click(function(){
  current  = current .next();
  $("div").css("background", "");
  current.css( "background-color", "red" );
});
});
</script>
</head>

<body>
<h2> It is an example of using the jQuery next() method </h2>
<p> Click the below button to see the effect. </p>
<p>
<button> click me </button>
</p>
<div id = "d1"> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</body>
</html>

Next TopicjQuery nextUntil() method

← prev next →