Description: Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector. selector A string containing a selector expression to match elements against. Given a jQuery object that represents a set of DOM elements, the .next() method allows us to
search through the immediately following sibling of these elements in the DOM tree and construct a new jQuery object from the matching elements. The method optionally accepts a selector expression of the same type that we can pass to the $() function. If the immediately following sibling matches the selector, it remains in the newly constructed jQuery object; otherwise, it is excluded. Consider a page with a simple list on it:
1 2 3 4 5 6 7 <li class="third-item">list item 3</li> If we begin at the third item, we can find the element which comes just after it:
1 $( "li.third-item" ).next().css( "background-color", "red" ); .next( [selector ] )Returns: jQuery
version added:
1.0.next( [selector ] )
The result of this call is a red background behind item 4. Since we do not supply a selector expression, this following element is unequivocally included as part of the object. If we had supplied one, the element would be tested for a match before it was included.
Examples:
Find the very next sibling of each disabled button and change its text "this button is disabled".
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <script src="//code.jquery.com/jquery-3.5.0.js"></script> <div><button disabled="disabled">First</button> - <span></span></div> <div><button>Second</button> - <span></span></div> <div><button disabled="disabled">Third</button> - <span></span></div> $( "button[disabled]" ).next().text( "this button is disabled" ); |
Demo:
Find the very next sibling of each paragraph. Keep only the ones with a class "selected".
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <script src="//code.jquery.com/jquery-3.5.0.js"></script> <p class="selected">Hello Again</p> <div><span>And Again</span></div> $( "p" ).next( ".selected" ).css( "background", "yellow" ); |
Demo:
View Discussion
Improve Article
Save Article
View Discussion
Improve Article
Save Article
The nextSibling property is used to return the next node of the specified node as Node object or null if the specified node is the last one in the list. It is a read-only property.
Syntax:
node.nextSiblingReturn value: This property returns a next sibling of the specified node or null if the current node has no next sibling.
Example:
html
<!DOCTYPE html>
<html>
<head>
<title>
DOM nextSibling Property
</title>
</head>
<body style="text-align: center">
<h2 style="color:green">
GeeksforGeeks
</h2>
<h2>
DOM nextSibling Property
</h2>
<div>
<span id="p1">
GeeksforGeeks!
</span><span id="p2">
A computer science portal for geeks.
</span>
</div>
<br>
<button title="geek()">Click me!</button>
<br>
<br>
<p id="p" style="margin:auto; width: 40%"></p>
<script>
function geek() {
var x =
document.getElementById("p1").nextSibling.innerHTML;
document.getElementById("p").innerHTML = x;
document.getElementById("p").style.color = "white";
document.getElementById("p").style.background = "green";
}
</script>
</body>
</html>
Output:
Before clicking the button:
After clicking the button:
Note: Don’t put whitespace between two sibling elements, else the result will be “undefined”.
Supported Browsers: The browser supported by nextSibling property are listed below:
- Google Chrome 1 and above
- Edge 12 and above
- Internet Explorer 5.5 and above
- Firefox 1 and above
- Opera 7 and above
- Safari 1.1 and above