Next Adjacent ('previous + next') JQ Home  <<  Selectors  <<  Next Adjacent ('previous + next')

Next Adjacent selector.

Shorthand version $('previous + next')

Description

The ('previous + next') selector, selects all specifed next sibling elements that are directly preceded by the specified previous sibling element.

Syntax

Signature Description
jQuery('previous + next')Next Adjacent match

Parameters

Parameter Description
previousA valid selector.
nextAnother valid selector to match the element next to the previous selector.

Return

N/A.

Next Adjacent ('previous + next') Example Selectors  <<  Top

Selects all specifed next sibling elements that are directly preceded by the specified previous sibling element.

For a match to occur both selectors must share the same parent.

The following example will select all 'p' elements that are preceded by 'h3' elements and place a 1 pixel solid red border around them. In this case the elements both share a common 'div' ancestor.




$(function(){
  $('#btn15').on('click', function() {
    $('h3 + p').css('border', '1px solid red');
  });
}); 


Press the button below to action the above code:

Related Tutorials

jQuery Basic Tutorials - Lesson 3 - CSS Selectors