Traversing Sideways in the DOM Tree
In addition to moving up and down the DOM tree, jQuery also provides
methods for traversing sideways—that is, selecting elements that share the
same parent as the current element (known as siblings).
Here are the most commonly used jQuery methods for sideways
traversal:
- siblings() – Selects all sibling elements.
- next() – Selects the next sibling element.
- nextAll() – Selects all following siblings.
- nextUntil() – Selects all following siblings up to (but not including) a specified element.
- prev() – Selects the previous sibling element.
- prevAll() – Selects all preceding siblings.
- prevUntil() – Selects all preceding siblings up to (but not including) a specified element.
These methods give you fine-grained control when navigating between
elements at the same level of the DOM structure.
jQuery siblings() Method
The siblings() method is used to select all sibling elements of a
specified element — that is, elements that share the same parent but are
not the selected element itself.
Example
The following code retrieves all sibling elements of every <h2> tag
on the page:
$(document).ready(function(){
$("h2").siblings();
});
This is helpful when you want to target elements that are on the same
level in the DOM tree, such as other items in a list or elements within
the same container.
You can also pass a selector to the siblings() method to filter the
results and return only specific sibling elements.
Example: Filter Siblings by Element Type
The following example selects only the <p> elements that are
siblings of each <h2>:
$(document).ready(function(){
$("h2").siblings("p");
});
This is especially useful when you want to interact with or style only
certain types of sibling elements, rather than all of them.
jQuery next() Method
The next() method is used to select the immediate next sibling of a
selected element — that is, the element that appears directly after it in
the DOM and shares the same parent.
Example
The following code selects the next sibling of each <h2> element on
the page:
$(document).ready(function(){
$("h2").next();
});
This method is useful when you need to work with the element that
directly follows another, such as the next item in a list or the next
section in a layout.
jQuery nextAll() Method
The nextAll() method is used to select all following siblings of the
selected element. These are elements that come after the selected one at
the same DOM level.
Example
The following example retrieves all sibling elements that follow each
<h2> on the page:
$(document).ready(function(){
$("h2").nextAll();
});
This is useful when you want to apply changes or actions to all elements
that appear after a certain point in the DOM structure.
jQuery nextUntil() Method
The nextUntil() method allows you to select all next sibling elements
between two specified elements in the DOM.
It starts from the selected element and collects siblings up to, but not
including, the element matched by the given selector.
Example
The following example selects all sibling elements that appear between
<h2> and <h6> elements:
$(document).ready(function(){
$("h2").nextUntil("h6");
});
This method is ideal when you need to work with a specific range of
elements in a sequence, rather than all following siblings.
More topic in jQuery
