How to do traversing in jQuery ?

What is Traversing ?

Traversing used to "find" (or select) HTML elements based on their relation to other elements.

With jQuery traversing, you can easily move up (ancestors), down (descendants) and sideways (siblings) in the family tree.

In addition to child / parent, there could be ancestor, descendant and siblings.

An ancestor is a parent, grandparent, great-grandparent, and so on.

A descendant is a child, grandchild, great-grandchild, and so on.

Siblings share the same parent.

Traversing to ancestor

parent()

Returns the direct parent element of the selected element. It only traverse a single level up the DOM tree.

Example  Returns the direct parent element of each span elements

$(document).ready(function() {

  $("span").parent();

});

parents()

Returns all ancestor elements of the selected element, all the way up to the document's root element (html tag)

Example  Returns all ancestors of all span elements

$(document).ready(function() {

  $("span").parents();

});

Use optional parameter to filter the search for ancestors

Example  Returns all ancestors of all <span> elements that are <ul> elements

$(document).ready(function() {

  $("span").parents("ul");

});

parentsUntil()

Returns all ancestor elements between two given arguments.

Example  Returns all ancestor elements between a span and a div element

$(document).ready(function() {

  $("span").parentsUntil("div");

});

Traversing to descendants

children()

Returns all direct children of the selected element. It only traverse a single level down the DOM tree.

Example  Returns all elements that are direct children of each div elements

$(document).ready(function() {

  $("div").children();

});

Use optional parameter to filter the search for children

Example   Returns all p elements with the class name "1", that are direct children of div

$(document).ready(function() {

  $("div").children("p.1");

});

find()

Returns descendant elements of the selected element, all the way down to the last descendant.

Example  Returns all <span> elements that are descendants of div

$(document).ready(function() {

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

});

Example  Returns all descendants of div

$(document).ready(function() {

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

});

Traveling Siblings

siblings()

Returns all sibling elements of the selected element.

Example  Returns all sibling elements of h2 

$(document).ready(function() {

  $("h2").siblings();

});

Use optional parameter to filter the search for siblings

Example  Returns all sibling elements of h2 that are p elements

$(document).ready(function() {

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

});

next()

Returns the next sibling element of the selected element. It only returns one element.

Example  Returns the next sibling of h2 

$(document).ready(function() {

  $("h2").next();

});

nextAll()

Returns all next sibling elements of the selected element.

Example  Returns all next sibling elements of h2 

$(document).ready(function() {

  $("h2").nextAll();

});

nextUntil()

Returns all next sibling elements between two given arguments.

Example  Returns all sibling elements between a h2 and a h6 element

$(document).ready(function() {

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

});

prev(), prevAll(), prevUntil()

These methods work same as above methods but with reverse functionality.

They returns previous sibling elements (traverse backwards along sibling elements in the DOM tree, instead of forward)