Updated April 20, 2023
Introduction to jQuery next()
The jQuery UI next() method is used to return the next sibling element of the selected element in the set of matched elements. The jQuery UI next() selector method is a built-in method in the jQuery UI library. The jQuery next() selector method gives the object that represents a set of DOM elements and it creates the new object which contains the result of immediately following sibling of these elements in the DOM tree. The sibling elements are those elements who are having the same parent element in DOM Tree. The UI next() selector method work as, the specified selector is checked against each element in the DOM tree, the immediate elements which are matched the selectors will be returned as a result, and then we can apply common behavior to them. The nextAll() method is another method which returns all the next sibling element of the selected element in the set of matched elements.
Syntax of jQuery next()
The syntax –
Here is the simple syntax to use the next() selector is –
selector.next()It is used to gets all next sibling elements of the selected element from the set of matched elements.
Parameters –
It doesn’t accept any parameter.
The return value of this method is the sibling element of the specified selector element.
Examples for the jQuery UI next() selector method
Next, we write the html code to understand the jQuery :next() selector method more clearly with the following example, where the next() selector method will be used to select the sibling of the specified elements based on their name, as below –
Example #1
Code:
<!doctype html>
<html lang ="en">
<head>
<meta charset="utf-8">
<title>This is an example for jQuery UI next( ) selector method </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").next().css({
"color": "red",
});
});
</script>
</head>
<body>
<p class = "p1"> This is the first p element of the DOM.</p>
<p class = "p2"> This is the second p element of the DOM.</p>
<span class = "span1"> This is the first span element of the DOM.<p class = "p1"> This is the third p element of the DOM.
</p> </span>
<div class = "div1"> This is the first div element of the DOM.</div>
</body>
</html>Output:
As in the above program an elements(p) siblings are selected by the name of the element through the line of code $(“p”).next().css({ “color”: “red” }); and apply red text color as a style to them.
Next, we rewrite the above html code to understand the jQuery next() selector method more clearly with the following example, where the next() method will use to select the sibling elements of an element based on its class, as below –
Example #2
Code:
<!doctype html>
<html lang ="en">
<head>
<meta charset="utf-8">
<title>This is an example for jQuery UI next( ) selector method </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$( "p.p2" ).next().css({ "color": "red" });
});
</script>
</head>
<body>
<p class = "p1"> This is the first p element of the DOM.</p>
<p class = "p2"> This is the second p element of the DOM.</p>
<span class = "span1"> This is the first span element of the DOM.<p class = "p1"> This is the third p element of the DOM.
</p> </span>
<div class = "div1"> This is the first div element of the DOM.</div>
</body>
</html>Output:
As in the above program the element (p) siblings are selected by their class through the line of “$( “p.p2” ).next().css( { “color”: “red” } );” and apply red text color as a style to them.
Next, we rewrite the above html code to understand the jQuery next() selector method more clearly with the following example, where the next() selector will be used to select the sibling elements of an element based on its id, as below –
Example #3
Code:
<!doctype html>
<html lang ="en">
<head>
<meta charset="utf-8">
<title>This is an example for jQuery UI next( ) selector method </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#pid1").next().css({ "color": "red" });
});
</script>
</head>
<body>
<p class = "p1" id = "pid1"> This is the first p element of the DOM.</p>
<p class = "p2" id = "pid2"> This is the second p element of the DOM.</p>
<span class = "span1" id = "spanid1"> This is the first span element of the DOM. <p class = "p1" id = "pid1">This is the third p element of the DOM. </p> </span>
<p class = "p2" id = "pid2">This is the fourth p element of the DOM. <span class = "span2" id = "spanid2">This is the second span element of the DOM. </span> </p>
<div class = "div1" id = "divid1"> This is the first div element of the DOM. </div>
</body>
</html>Output:
As in the above program the element (p) siblings are selected by their id through the line of code “$( “#pid1” ).next().css({ “color” : “red” });” and apply red text color as a style to them.
Conclusion
The jQuery UI next() method is a built-in method in the jQuery UI library which is used to gets the next immediate sibling element of the selected element in the set of matched elements, the result object represents a set of DOM elements of immediately following sibling of the elements in the DOM tree.
Recommended Articles
This is a guide to jQuery next(). Here we discuss the introduction to jQuery next() along with programming examples for better understanding. You may also have a look at the following articles to learn more –
