Siblings, next, Prev

Siblings have the same parent element.

With jquery, You can traverse the sibling elements of an element in the DOM tree.

Horizontal traversal in the DOM tree

• Siblings ()
• Next ()
• Nextall ()
• Nextuntil ()
• Prev ()
• Prevall ()
• Prevuntil ()

Jquery siblings () method

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

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

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

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

Jquery next () method

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

This method returns only one element.

The following example returns the next compatriot element of <H2>:

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

Jquery nextall () method

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

The following example returns all the following compatriot elements of <H2>:

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

Jquery nextuntil () method

The nextuntil () method returns all the following compatriot elements between two given parameters.

The following example returns all compatriot elements between <H2> and <H6>:

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

Jquery Prev (), prevall () & prevuntil () method

The Prev (), prevall (), and prevuntil () methods work in the same way as the preceding method, but in the opposite direction: they return the first sibling element (traversing the sibling element backward in the DOM tree, rather than forward ).