27 Jan jQuery – Find Siblings of an element

In jQuery, we can easily find the siblings of an element. Let us see the figure again:

In the above figure, the <ul> and <ol> are siblings since they have the same parent.

Siblings suggest traversing sideways in the DOM tree and the following are the supported methods in jQuery:

• siblings()
• next()
• nextAll()
• nextUntil()
• prev()
• prevAll()
• prevUntil()

Let us learn about each method one by one:

The siblings() method in jQuery

As the name suggests, the siblings() method returns the siblings of the selected element. Let us see an example. We will find the siblings of the <p> element:

Output

The next() method in jQuery

To return the next sibling of the selected element, use the next() method in jQuery. Let us see an example. We will find the next sibling of <p>:

Output

The nextAll() method in jQuery

To return all the next siblings of the selected element, use the nextAll() method in jQuery. Let us see an example. We will find all the next siblings of the <p> element:

Output

The nextUntil() method in jQuery

To return all the next siblings between two elements, use the nextUntil() method in jQuery. Let us see an example. We will find all the next siblings between <h1> and <ol>:

Output

The prev() method in jQuery

To return the previous sibling of the selected element, use the prev() method in jQuery. Let us see an example. We will find the previous sibling of the <p> element:

Output

The prevAll() method in jQuery

To return all the previous siblings of the selected element, use the prevAll() method in jQuery. Let us see an example. We will find all the previous siblings of the <h2> element:

Output

The prevUntil() method in jQuery

To return all the previous siblings between two elements, use the prevUntil() method in jQuery. Let us see an example. We will find all the previous siblings between <h1> and <ol>:

Output