In this post, we will discuss how to get the siblings of an HTML element in jQuery. jQuery API provides siblings() method to achieve this functionality.

jQuery siblings()

The siblings() method is used to return all the siblings of the selected HTML element. Unlike jQuery next() and prev() methods, this method traverses both forward and backwards along the siblings of the selected element. This method is very handy when you want to carry out similar tasks on a set of elements.

Here is the general syntax for using siblings method:

  • selector.siblings( [filter ] )

filter is an optional parameter passed to the method to narrow down the traversal.

jQuery siblings() example

Following example demonstrates the jQuery siblings() usage.

In this example, you can see three div elements and each div has three span elements. In the first and second div elements, the second span has a CSS style class “highlight”. The siblings() method returns all the siblings of the selected element having class=”highlight” and changes the color of the siblings to red.

In the firstdiv, Bheem and Nakul are siblings of Arjun and in the second div, Mark and Steve are siblings of Tom. This is how we get the siblings of an element in jQuery. Below image is the output produced by the above HTML page.

jquery-siblings-example-450x229

By admin

Leave a Reply