Next Siblings ('previous ~ siblings') JQ Home  <<  Selectors  <<  Next Siblings ('previous ~ siblings')

• <<    Next Adjacent Selector
• :hidden Selector     >>

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

Parameters

Return

N/A.

Next Siblings ('previous ~ siblings') Examples Selectors  <<  Top

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() {
    $('h3 ~ 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');
  });
}); 

Related Tutorials

jQuery Basic Tutorials - Lesson 3 - CSS Selectors

• <<    Next Adjacent Selector
• :hidden Selector     >>