Next Siblings ('previous ~ siblings')S2C Home « Selectors « Next Siblings ('previous ~ siblings')
Next Siblings selector.
Shorthand version $('previous ~ siblings')
Description
The ('previous ~ siblings') selector, selects all specified sibling elements that follow after the specified previous element and have the same parent.
- Both elements on either side of the combinator must share the same parent.
Syntax
| Signature | Description |
|---|---|
jQuery('previous ~ siblings') | Next Siblings match |
Parameters
| Parameter | Description |
|---|---|
previous | A valid selector. |
siblings | Another valid selector to match the elements next to the previous selector. |
Return
N/A.
Next Siblings ('previous ~ siblings') ExamplesTop
Selects all specified sibling elements that follow after the specified previous element and have the same parent.
The following example will select all 'table' elements that are preceded by a 'h3' element and change the background color of these elements to silver. In this case the elements both share a common 'div' ancestor. Look at the tables above after clicking the button.
$(function(){
$('#btn1').on('click', function() {
$('h2 ~ table').css('backgroundColor', 'silver');
});
});
The following example will select all 'h4' elements that are preceded by a 'h3' element and place a 2 pixel solid red border around them. In this case the elements both share a common 'div' ancestor. Look at the left sidebar after clicking the button.
$(function(){
$('#btn2').on('click', function() {
$('h3 ~ h4').css('border', '2px solid red');
});
});
The following example will select all 'form' elements that are preceded by a 'pre' element and change the background color of these elements to orange. In this case the elements both share a common 'div' ancestor. Look at the button containers after clicking the button.
$(function(){
$('#btn3').on('click', function() {
$('pre ~ form').css('backgroundColor', 'orange');
});
});