jQuery Traverse

Traversing Up the DOM Tree

Three useful jQuery methods for traversing up the DOM tree are:

Examples:
$(selector).parent();
$(selector).parents();
$(selector).parentsUntil();

jQuery parent() Method

The parent() method returns the direct parent element of the selected element.

This method only traverse a single level up the DOM tree.

Example: returns the direct parent element of each <span> elements:
$("span").parent();
div (great-grandparent)
div (grandparent)

p (direct parent) span

jQuery parents() Method

The parents() method returns all ancestor elements of the selected element, all the way up to the document's root element (<html>).

Example:
$(document).ready(function(){
$("span").parents();
});

You can also use an optional parameter to filter the search for ancestors.
The following example returns all ancestors of all <span> elements that are <ul> elements:

Example:
$(document).ready(function(){
$("span").parents("ul");
});
body (great-great-grandparent)
div (great-grandparent)

Query parentsUntil() Method

The parentsUntil() method returns all ancestor elements between two given arguments.
The following example returns all ancestor elements between a <span> and a <div> element:

$(document).ready(function(){
$("span").parentsUntil("div");
});
body (great-great-grandparent)
div (great-grandparent)

Traversing Down the DOM Tree

Two useful jQuery methods for traversing down the DOM tree are:

Examples:
$(selector).children();
$(selector).find();

jQuery children() Method

The children() method returns all direct children of the selected element.

This method only traverse a single level down the DOM tree.

Example: returns all elements that are direct children of each <div> elements:
$("div").children();

An optional parameter can also be used to filter the search for children.

Example: returns all <p> elements with the class name "1", that are direct children of <div>:
Example
$("div").children("p.1");

jQuery find() Method

The find() method returns descendant elements of the selected element, all the way down to the last descendant.
The following example returns all <span> elements that are descendants of <div>:

Example:
$("div").find("span");

The following example returns all descendants of <div>:

Example:
$("div").find("*");

jQuery Traversing - Siblings

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

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

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

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

Example:
$("h2").siblings();

You can also use an optional parameter to filter the search for siblings.
The following example returns all sibling elements of <h2> that are <p> elements:

Example:
$("h2").siblings("p");

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

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

Example:
$("h2").next();

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

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

Example:
$("h2").nextAll();

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:

Example:
$("h2").nextUntil("h6");

The prev(), prevAll() and prevUntil() methods work just like the methods above but with reverse functionality: they return previous sibling elements (traverse backwards along sibling elements in the DOM tree, instead of forward).