.siblings()S2C Home « Traversal « .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 |
|---|---|---|
selector | A string containing a CSS or custom jQuery selector to match elements against. | Selector |
Return
A jQuery object either containing the elements matched or empty.
.siblings() ExampleTop
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 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');
});
});
.siblings( selector ) ExampleTop
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 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');
});
});