WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

jQuery Traversing - Siblings


Siblings share the equivalent parent.

With jQuery you can navigate sideways in the DOM tree to discover kin of an element.


Traversing Sideways in The DOM Tree

There are numerous valuable jQuery strategies for navigating sideways in the DOM tree:

  • siblings()
  • next()
  • nextAll()
  • nextUntil()
  • prev()
  • prevAll()
  • prevUntil()

jQuery kin() Method

The kin() strategy restores all kin components of the chose element.

The following precedent returns all kin components of <h2>:

Example

$(document).ready(function(){
    $("h2").siblings();
});
Try it yourself »

You can likewise utilize a discretionary parameter to channel the scan for siblings.

The following model returns all kin components of <h2> that are <p> elements:

Example

$(document).ready(function(){
    $("h2").siblings("p");
});
Try it yourself »

jQuery next() Method

The next() technique restores the following kin component of the chose element.

The following model returns the following kin of <h2>:

Example

$(document).ready(function(){
    $("h2").next();
});
Try it yourself »

jQuery nextAll() Method

The nextAll() strategy restores all next kin components of the chose element.

The following precedent returns all next kin components of <h2>:

Example

$(document).ready(function(){
    $("h2").nextAll();
});
Try it yourself »

jQuery nextUntil() Method

The nextUntil() strategy restores all next kin components between two given arguments.

The following model returns all sibling components between a <h2> and a <h6> element:

Example

$(document).ready(function(){
    $("h2").nextUntil("h6");
});
Try it yourself »

jQuery prev(), prevAll() & prevUntil() Methods

The prev(), prevAll() and prevUntil() techniques work simply like the strategies above however with turn around usefulness: they return past kin components (cross in reverse along kin components in the DOM tree, rather than forward).


jQuery Traversing Reference

For a total diagram of all jQuery Traversing techniques, if it's not too much trouble go to our jQuery Traversing Reference.