SyntaxStudy
Sign Up
jQuery Intermediate 9 min read

DOM Traversal

jQuery DOM Traversal

Parents and Ancestors

$("span").parent();           // direct parent
$("span").parents("div");     // all div ancestors
$("span").closest(".box");    // nearest ancestor matching

Children and Descendants

$("ul").children();           // direct children
$("ul").children("li.active");
$("div").find("p");           // all p descendants
$("div").find("*");           // all descendants

Siblings

$("li").siblings();
$("li").siblings(".active");
$("li").next();
$("li").prev();
$("li").nextAll();
$("li").prevAll();

Filtering

$("li").first();
$("li").last();
$("li").eq(2);          // by index
$("li").filter(".done");
$("li").not(".done");
$("li").has("span");    // has descendant span
Pro Tip

Use .closest() instead of .parents() when you need the first match — it stops at the first hit.