Updated April 7, 2023
Introduction to jQuery next sibling
In JQuery, next is a method that is a built-in function for getting the next element or sibling of the currently selected element where this next element is extracted from the element which is the parent element. In general, we can define the JQuery next() sibling method as an in-built JQuery function to return the next sibling of the selected element and these elements are of the same parent in DOM (Document Object Model) tree and hence this function is mainly considered as a method for accessing an element in the given Dom tree which has parent and children elements.
Syntax:
$(selector_element).next();In the above syntax, the next() sibling method does not take any parameters which means it accepts the optional parameter for specifying a selector expression which may further help to ease down the searching for the next element. This next() sibling function returns the next sibling element of the same parent in the DOM tree of the selected element.
Working of next() sibling in JQuery with examples
In JQuery sibling elements are the elements having the same parent in the DOM tree. Therefore for accessing the elements in the DOM tree or traversing the tree by moving throughout the entire Dom tree to find the next sibling element of the same given parent element and to find such elements there are several methods in JQuery. In this article, we will discuss the next() method in JQuery. The next() sibling method working is discussed as follows
Firstly, the next() method is a built-in method of JQuery, where when one element is selected and when this next() method is triggered on this element, then it starts traversing the DOM tree and checks for the next sibling element of the currently selected element. Now let us consider the examples for demonstrating the next() method in JQuery. In JQuery elements mean any Html tags that can be defined as elements within the parent element and most of the time to define the parent element or block in Html it uses <div> tag and other elements such as heading tags ( h1, h2, h3, h4, h5, h6) , paragraph tags ( <P> ), span tags <span>, ordered and unordered list tags ( <ul>, <li>), etc can be children elements.
Examples:
To demonstrate the next() method in JQuery for returning the following sibling element of the selected element in the below example.
<html>
<head>
<title> The next sibling demonstration in JQuery </title>
<style>
.next * {
display: block;
border: 2px solid red;
color: blue;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/
jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("span").next().css({
"color": "black",
"border": "2px solid black"
});
});
</script>
</head>
<body class="next">
<div>
parent element block
<h1> This is first element in this block </h1>
<h2> This is second element in this parent block </h2>
<p>Educba Training Institute, Delhi </p>
<span>You can create span box here </span>
<p> The content of this paragraph will be printed next to the span element where this paragraph is next sibling to span element. </p>
</div>
</body>
</html>Output:
In the above example, we can see we have first declared the class next in the style tags with the properties for displays the elements in the given Html code. In the above code, we can see there are 5 elements defined within the parent element, and this parent element is declared by using <div> tag within which it has the children elements such as heading tags, paragraph tag, span tag, paragraph tag. Where we are trying to display the next sibling element after the span tag. Therefore in the above code, the <span> tag is followed by the paragraph <p> tag and hence the last paragraph <p> tag is considered as the next sibling element of the specified element such as <span> tag and this done by triggering the next() on the span tag wherein the above code it is done as “$ (“span” ).next() ” which helps to find the next sibling element of the given element.
Example:
Now in the below example let us highlight the next sibling by using the button along with click event.
<!DOCTYPE html>
<html>
<head>
<title> JQuery next() sibling method demonstration </title>
<style>
.main_next_class * {
display: block;
font-size: 30px;
position: relative;
border: 2px solid Purple;
color: Red;
padding: 10px;
margin: 19px;
}
</style>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
function next_func(){
$(document).ready(function(){
$("h2").next().css({ "font-size": "30px", "color": "green", "border": "8px dashed yellow"});
});
}
</script>
</head>
<body class = "main_next_class">
<div id = "div1"> Parent element block
<ul> First element </ul>
<h2> Second element </h2>
<h3> Third element </h3>
<h4> Fourth element </h4>
<p> Fifth element </p>
<span> Six element </span>
</div>
<button onclick = "next_func()"> click me to view the next sibling element of h3 </button>
</body>
</html>Output:
After clicking on the button the output will be-
In the above example, we have again defined and declared several elements in the parent element which is defined by the <div> tag in the above code. Then there are 6 children elements in the given parent element. In the above code, we have defined different properties for the defined class “main_next_class” such as font-size, border, color, padding, margin, etc. Then we have defined function “next_func() in which we are triggering the next() method on the second element which is “h2” and the next sibling element is displayed with different CSS properties which are defined for the sibling tag and therefore the next sibling tag of the second element “<h2>” is the third element which is “<h3> tag” element. In the above output we can see the six elements displayed in the first screenshot and the six elements defined are <ul>, <h2>, <h3>, <h4>, <p> and <span> tags in order and in the second screenshot we can see that the next sibling element is displayed by yellow dashed border with font color as black to highlight the next sibling of the specified <h2> element in the above-given code.
Conclusion
In this article, we conclude that JQuery provides the built-in function for traversing the DOM tree to find the next sibling element of the given parent element. In JQuery there are different methods for traversing and searching the elements such as next(), nextall(), etc for traversing the tree which consists of parent and child elements in it.
Recommended Articles
This is a guide to jQuery next sibling. Here we discuss the Working of the next() sibling in JQuery with examples and outputs. You may also look at the following article to learn more –
