jQuery — Ancestors

parent()

$("p").parent();            // Direct parent
$("p").parent(".container"); // Parent matching selector

parents()

$("p").parents();           // All ancestors
$("p").parents(".wrapper"); // Matching ancestors

closest()

$("span").closest("div");   // Closest ancestor div
$("span").closest("ul", ".sidebar"); // Stop at .sidebar

parentUntil()

Ancestors between two selectors:

$("li").parentUntil("ul");  // Stop at first ul

Practical: Event Delegation

// Using closest for event delegation
$("document").on("click", ".btn", function(e) {
    var $row = $(e.target).closest("tr");
    $row.addClass("selected");
});

Ancestor Traversal Methods

Method	Direction	Stops At
parent()	Up	Direct parent
parents()	Up	All ancestors
parentsUntil()	Up	Until selector
closest()	Up	First match

Mini Practice

1. Find the parent of a clicked element
2. Use parents() to traverse up
3. Use closest() to find a container
4. Use parentUntil() to stop at a boundary

Up Next

Continue with Descendants — navigating down to child elements.