jQuery Tutorial
jQuery Introduction jQuery Getting Started jQuery Syntax jQuery Selectors jQuery Events
jQuery Effects
jQuery Hide/Show jQuery Fade jQuery Slide jQuery Animation jQuery stop() jQuery Callback jQuery Chaining
jQuery Manipulation
jQuery Get/Set jQuery Add jQuery Remove jQuery CSS Classes jQuery css() jQuery Dimensions
jQuery Traversing
jQuery Traversing jQuery Ancestors jQuery Descendants jQuery Siblings jQuery Filtering
jQuery AJAX
jQuery AJAX Intro jQuery Load jQuery Get/Post jQuery AJAX Events
jQuery Misc
jQuery noConflict() jQuery Filters
jQuery References
jQuery Reference jQuery Selectors jQuery Events jQuery Effects jQuery HTML/CSS jQuery Traversing jQuery AJAX jQuery Miscellaneous jQuery Properties

jQuery Traversing Siblings

With jQuery we can easily traverse sideways in the DOM tree to find siblings of an element.

Siblings elements are those elements that share the same parent.

In this chapter we will explain how to traverse sideways in the DOM tree.


Traversing Sideways in the DOM Tree

We have the following jQuery methods that are used for traverse sideways in the DOM tree:

The following section will show you how to use each method.


jQuery siblings() Method

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

The following example returns all sibling elements of each <li> element with class name "middle":

Run code

You can also use an optional parameter to filter the search for siblings.

The following example returns all siblings with a class "bold" of each list item:

Run code

jQuery next() Method

The jQuery next() method returns the next sibling element that is placed immediately after the selected element.

The following example returns the next sibling element of each DIV element:

Run code

jQuery nextAll() Method

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

The following example returns all next sibling elements of each DIV element:

Run code

jQuery prev() Method

The jQuery prev() method returns the previous sibling element that is placed immediately before the selected element.

The following example returns the previous sibling element of each DIV element:

Run code

jQuery prevAll() Method

The jQuery prevAll() method returns all previous sibling elements of the selected element.

The following example returns all previous sibling elements of each DIV element:

Run code

jQuery nextUntil() and prevUntil() Methods

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

The jQuery prevUntil() method returns all previous sibling elements between two given arguments.

The following example returns all next siblings that follow <dt id="term-2"> up to the next <dt>:

Run code

The following example returns all siblings that precede <dt id="term-2"> up to the preceding <dt>:

Run code

jQuery Traversing Reference

For a complete Traversing methods reference, visit our jQuery Traversing Reference.