jQuery - jQuery Ancestors

jQuery Ancestors 

In jQuery, ancestors are the elements that are above a selected element in the DOM hierarchy.
jQuery provides several methods to traverse upward from the current element to find its parent, grandparents, and other ancestors.

1) What Are Ancestors in jQuery?

  • An ancestor is any element that contains another element.

  • For example:

    <div>
  <section>
    <p>Hello</p>
  </section>
</div>

    • <div> and <section> are ancestors of <p>.

  • jQuery provides the following methods to work with ancestors:

Method Description
.parent() Selects the direct parent of an element
.parents() Selects all ancestors up the DOM tree
.parentsUntil() Selects ancestors up to a specified element
.closest() Selects the first matching ancestor

2) .parent() Method

Definition

The .parent() method selects the immediate parent of the selected element.

Syntax

$(selector).parent(filter);

Parameters

Parameter Description Optional
filter A selector to filter the parent element Yes

Example 1: Get Direct Parent

$("span").parent().css("border", "2px solid red");

  • Selects the immediate parent of <span>.

Example 2: Filter Parent by Tag

$("span").parent("div").css("background", "yellow");

  • Selects the parent only if it is a <div>.

3) .parents() Method

Definition

The .parents() method selects all ancestors of the selected element, up to the <html> element.

Syntax

$(selector).parents(filter);

Parameters

Parameter Description Optional
filter A selector to filter the ancestors Yes

Example 1: Get All Ancestors

$("span").parents().css("border", "1px solid blue");

  • Selects all ancestor elements of <span>.

Example 2: Get Specific Ancestors

$("span").parents("div").css("background-color", "lightgreen");

  • Selects only the <div> ancestors of <span>.

4) .parentsUntil() Method

Definition

The .parentsUntil() method selects all ancestors up to, but not including, a specified element.

Syntax

$(selector).parentsUntil(selector);

Example

$("span").parentsUntil("body").css("border", "2px dashed purple");

  • Selects all ancestors of <span> up to <body>, excluding <body> itself.

5) .closest() Method

Definition

The .closest() method searches up the DOM tree and returns the first matching ancestor (including the element itself).

Syntax

$(selector).closest(filter);

Example

$("span").closest("div").css("background-color", "orange");

  • Starts from <span> and finds the first closest <div>.

6) Difference Between .parent(), .parents(), .parentsUntil(), and .closest()

Method Selects Depth Example
.parent() Direct parent only 1 level $("span").parent()
.parents() All ancestors All levels $("span").parents()
.parentsUntil() Ancestors up to a limit Multiple $("span").parentsUntil("body")
.closest() First matching ancestor Stops early $("span").closest("div")

7) Practical Example

HTML

<div id="main">
  <section class="wrapper">
    <article>
      <p><span>Hello World</span></p>
    </article>
  </section>
</div>

jQuery

// Direct parent of <span>
$("span").parent().css("color", "red");

// All ancestors of <span>
$("span").parents().css("border", "1px solid green");

// All <div> ancestors only
$("span").parents("div").css("background", "lightblue");

// Ancestors up to <section>
$("span").parentsUntil(".wrapper").css("border", "2px dashed purple");

// Closest <section> ancestor
$("span").closest("section").css("background-color", "yellow");

8) Summary

  • .parent() → Gets immediate parent.

  • .parents() → Gets all ancestors up to <html>.

  • .parentsUntil() → Gets ancestors until a specific element.

  • .closest() → Finds the nearest matching ancestor.

  • These methods are very useful for DOM traversal when working with nested HTML structures.