JQ Home  <<  Traversal  <<  .siblings()

.siblings()

Sibling elements retrieval.

Description

The .siblings() method is used to retrieve the siblings of each element within the matched set.

  • The original element is not included among the matched set of siblings, so this method is not suitable when we wish to find all elements at a particular level of the DOM tree.

Syntax

Signature Description
.siblings()Retrieve the siblings of each element within the matched set.
.siblings( selector )Retrieve the siblings of each element within the matched set that match the specified selector.

Parameters

Parameter Description Type
selectorA string containing a CSS or custom jQuery selector to match elements against.Selector

Return

A jQuery object.

.siblings() Example Traversal  <<  Top

Retrieve the siblings of each element within the matched set.

In the example below we select all siblings of the 'tr' elements with an id of '#trid1'and turn the background colour of siblings to orange. Notice how the element used to find our siblings is not included in the match.

Table For Testing The .siblings() Signature
Table Row 1, Table Data 1 Table Row 1, Table Data 2
Table Row 2 (id of trid1), Table Data 1 Table Row 2 (id of trid1), Table Data 2
Table Row 3, Table Data 1 Table Row 3, Table Data 2
Table Row 4, Table Data 1 Table Row 4, Table Data 2 



$(function(){
  $('#btn30').on('click', function() {
    $('.testtable #trid1').siblings()
                          .css('backgroundColor', 'orange');
  });
});

Press the button below to action the above code:

.siblings( selector ) Example Traversal  <<  Top

Retrieve the siblings of each element within the matched set that match the specified selector.

In the example below we select all siblings of the 'tr' elements with an id of '#trid2', filtered by a class of 'trclass1' and turn the background colour of siblings to teal. Notice how the element used to find our siblings is not included in the match.

Table For Testing The .siblings( selector ) Signature
Table Row 1 (class of trclass1), Table Data 1 Table Row 1 (class of trclass1), Table Data 2
Table Row 2 (id of trid2), Table Data 1 Table Row 2 (id of trid2), Table Data 2
Table Row 3, Table Data 1 Table Row 3, Table Data 2
Table Row 4 (class of trclass1), Table Data 1 Table Row 4 (class of trclass1), Table Data 2 



$(function(){
  $('#btn31').on('click', function() {
    $('.testtable2 #trid2').siblings('.trclass1')
                           .css('backgroundColor', 'teal');
  });
});

Press the button below to action the above code:

Related Tutorials

jQuery Basic Tutorials - Lesson 6 - Tree Traversal