Skip to content
jQuery

Traversing the DOM

Navigate relatives and filter the matched set.

By EZ4Code Team
traversingnavigation

Code

// Moving around the tree
$("#item").parent();           // direct parent
$("#item").parents(".wrap");   // nearest ancestor matching
$("#item").children(".active");// direct children
$("#item").find("a");          // all descendants

// Siblings
$("#item").next();
$("#item").prev();
$("#item").siblings();

// Filtering
$("li").first();
$("li").last();
$("li").eq(2);                 // third item (0-indexed)
$("li").filter(".active");
$("li").not(".disabled");

// Chaining traversal
$("#start").parent().find("a").first().addClass("link");

Explanation

Traversal methods navigate relative to the current matched set: parent/children/find move up and down, siblings/next/prev move sideways. filter() and not() narrow the set by a selector or function. Each method returns a new jQuery object for chaining.

More jQuery Snippets