jQuery | next() & nextAll() with Examples
next()
The next() is an inbuilt function in jQuery which is used to return the next sibling of the selected element. Siblings are those having same parent element in DOM Tree. Document Object Model (DOM) is a World Wide Web Consortium standard. This defines for accessing elements in the DOM tree.
Syntax:
$(selector).next()
Parameters: It does not accept any parameters.
Return Value : It returns the next siblings of the selected element.
Code #1:
<html> <head> <style> .next * { display: block; border: 2px solid lightgrey; color: black; padding: 5px; margin: 15px; } </style> jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function() { $("h3").next().css({ "color": "black", "border": "2px solid green" }); }); </script></head> <body class="next"> <div> This is parent element ! <p>This is first paragraph </p> <span>first span box </span> <h2>heading 2 !</h2> <h3>heading 3 !</h3> <p>This is the second paragraph and next sibling to h3 !</p> </div></body> </html> |
In the above code, next sibling element of “h3” get highlighted with green color.
Output:
nextAll()
The nextAll() is an inbuilt method in jQuery which is used to return all the next sibling elements of the selected element.
Syntax:
$(selector).nextAll()
Parameters: It does not accept any parameter.
Return Value: It returns all the next sibling elements of the selected element.
Code #2:
<!DOCTYPE html><html> <head> <style> .next * { display: block; border: 2px solid lightgrey; color: black; padding: 5px; margin: 15px; } </style> jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function() { $("h2").nextAll().css({ "color": "black", "border": "2px solid green" }); }); </script></head> <body class="next"> <div> This is parent element ! <p>This is first paragraph </p> <span>first span box </span> <h2>heading 2 !</h2> <h3>heading 3 !</h3> <p>This is the second paragraph and next sibling to h3 !</p> </div></body> </html> |
In the above code, all the next sibling elements of “h2” get highlighted with green color.
Output:
Please Login to comment...