jquery Traversing - Siblings

Traversing Sideways in The DOM Tree

There are many useful jQuery methods for traversing sideways in the DOM tree:

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

jQuery siblings() Method

The siblings() method returns all sibling elements of the selected element.

The following example returns all sibling elements of <h2>:

The following example returns all sibling elements of <h2> that are <p> elements:

$(document).ready(function(){
  $("h2").siblings("p");
});

Example -

jQuery next() Method

The next() method returns the next sibling element of the selected element.

The following example returns the next sibling of <h2>:

$(document).ready(function(){
  $("h2").next();
});

Example -

jQuery nextAll() Method

The nextAll() method returns all next sibling elements of the selected element.

The following example returns all next sibling elements of <h2>:

$(document).ready(function(){
  $("h2").nextAll();
});

Example -

jQuery nextUntil() Method

The nextUntil() method returns all next sibling elements between two given arguments.

The following example returns all sibling elements between a <h2> and a <h6> element:

$(document).ready(function(){
  $("h2").nextUntil("h6");
});

Example -