jQuery Traversal - Siblings
Siblings have the same parent element.
With jQuery, you can traverse an element's sibling elements in the DOM tree.
Horizontal traversal in the DOM tree
There are many useful methods that allow us to traverse the DOM tree horizontally:
siblings()
next()
nextAll()
nextUntil()
prev()
prevAll()
prevUntil()
jQuery siblings() method
siblings() method returns all sibling elements of the selected element.
The following example returns all sibling elements of <h2>:
Example
$(document).ready(function(){
$("h2").siblings();
});You can also use optional parameters to filter the search for sibling elements.
The following example returns all <p> elements that are siblings of <h2>:
Example
$(document).ready(function(){
$("h2").siblings("p");
});jQuery next() method
## The #next() method returns the next sibling element of the selected element.
This method only returns one element.
The following example returns the next sibling element of <h2>:
Example
$(document).ready(function(){
$("h2").next();
});jQuery nextAll() method
nextAll() method returns All following siblings of the selected element.
The following example returns all following sibling elements of <h2>:
Example
$(document).ready(function(){
$("h2").nextAll();
});jQuery nextUntil() method
nextUntil() method Returns all following sibling elements between the two given arguments.
The following example returns all sibling elements between the <h2> and <h6> elements:
Example
$(document).ready(function(){
$("h2").nextUntil("h6");
});jQuery prev(), prevAll( ) & prevUntil() method
The prev(), prevAll() and prevUntil() methods work similarly to the above methods, but in the opposite direction: they return the previous sibling element (in the DOM The tree is traversed backward along sibling elements, not forward).
Next Section
