You Are Here

jQuery Siblings

You can easily traverse sideways in the DOM tree using jQuery to find siblings of an element. The jQuery sibling elements are those elements that share the same parent.

Traversing Sideways in DOM Tree:

Following are the jQuery Methods that are used to traverse sideways in the DOM tree:
  • siblings()
  • next()
  • nextAll()
  • nextUntil()
  • prev()
  • prevAll()
  • prevUntil()

jQuery siblings() Method:

The siblings() method in jQuery is used to get the sibling elements of the selected element.
In the following example, the siblings of the <p> element which is <h2> and <ul> will be highlighted by adding the class .highlight-sibling on document ready.

Example:

$(document).ready(function(){
$("p").siblings().addClass("highlight-sibling");
});
Try it
You can also include an optional parameter to filter your search for the siblings. In the following example, the border will be applied around the siblings of the <p> i.e to the <ul> elements.

Example:

$(document).ready(function(){
$("p").siblings("ul").addClass("highlight-sibling");
});
Try it

jQuery next() Method:

The next() method in jQuery is used to get the immediately following sibling i.e. the next sibling element of the selected element. In the following example, the next sibling of the <p> element which is the <ul> will be highlighted.

Example:

$(document).ready(function(){
$("p").next().addClass("highlight-sibling");
});
Try it

jQuery nextAll() Method:

The jQuery nextAll() method is used to get all next sibling elements of the selected element.
In the following example, all the siblings of the <p> element that comes next to it will be highlighted.

Example:

$(document).ready(function(){
$("p").nextAll().addClass("highlight-sibling");
});
Try it

jQuery nextUntil() Method:

The nextUntil() method is used to get all the next sibling elements between two given arguments.
In the following example, all the following sibling elements of the <h2> element excluding the <ul> element will be highlighted.

Example:

$(document).ready(function(){
$("h2").nextUntil("ul").addClass("highlight-sibling");
});
Try it

jQuery prev() Method:

The jQuery prev() method is used to get the previous sibling element that is placed immediately before the selected element.
In the following example, the previous sibling of the <ul> element which is the <p> element will be highlighted.

Example:

$(document).ready(function(){
$("ul").prev().addClass("highlight-sibling");
});
Try it

jQuery prevAll() Method:

The jQuery prevAll() method is used to get all previous sibling elements of the selected element.
In the following example all siblings of the <ul> element that comes before it will be highlighted.

Example:

$(document).ready(function(){
$("ul").prevAll().addClass("highlight-sibling");
});
Try it

jQuery prevUntil() Method:

The jQuery prevUntil() method is used to get all previous sibling elements between two given arguments.
In the following example, all the previous sibling elements of the <ul> element excluding <h2> element will be highlighted.

Example:

$(document).ready(function(){
$("ul").prevUntil("h2").addClass("highlight-sibling");
});
Try it

Ask a Question

Your email address will not be published. Required fields are marked *