jQuery: how the siblings() method works

jQuery: how the siblings() method works

A practical example that explains how to use the jQuery's siblings() method.

The jQuery's siblings() method selects all the sibling elements of a given element. An interesting aspect of this method is that it accepts a jQuery selector as its argument to filter the returned set of siblings elements. With this method we can actually exclude the current element from the action applied to the other elements. Let's see a practical example.

Here's an interesting action that takes place when you click on an element:

$('img', '#gallery').click(function() {
    $(this).siblings('img').fadeTo(500, .3).animate({
        left: - 5
    }, 200).animate({
        left: 0
    }, 250).fadeTo(250, 1);

Bear in mind, however, that when you have different types of elements, you should always specify a selector with the siblings() method if you don't want this method to select unwanted elements.

You can see the demo below.


Live demo