jQuery .parents() Method

What You’ll Learn

The .parents() traversing method climbs the DOM tree — it returns every ancestor of each matched element, optionally filtered by a selector. This tutorial covers the official nested-list and parent-tag demos, comparisons with .parent(), .closest(), and practical click-to-highlight patterns.

Introduction

Sometimes one parent is not enough. You need every wrapper above an element — the ul, the containing li, the outer list, body, and html. That is what .parents() is for.

Available since jQuery 1.0, .parents([selector]) walks up from each matched element’s immediate parent toward the root, building a new jQuery object of ancestors. Unlike .parent(), it does not stop after one level. Unlike .closest(), it can return many ancestors and never includes the starting element itself.

Understanding the .parents() Method

Given a jQuery object representing DOM elements, .parents() follows parentNode links upward until there are no more element ancestors. When you pass a selector, only ancestors that match are kept — but jQuery still walks the full chain internally to find them.

Results for a single element are ordered from the closest ancestor outward. When several elements start the search, jQuery merges their ancestor sets in reverse order of the original elements and removes duplicates — handy when batch-processing, but worth remembering when debugging order.

📝 Syntax

General form of .parents:

.parents( [ selector ] )

Parameters

• selector (optional) — a string containing a selector expression. Only ancestors that match are included in the result.

Return value

• A new jQuery object containing all ancestors of each element in the current set (filtered when a selector is provided). Does not include the starting elements.

Official jQuery API nested list example

$( "li.item-a" ).parents().css( "background-color", "red" );

// Red on inner ul, li II, outer ul, body, html — all ancestors

Examples Gallery

Examples 1–3 follow the official jQuery API documentation. Use DevTools or the Try-it links to run each snippet in the browser.

$( "li.item-a" ).parents().css( "background-color", "red" );

Inner ul, li II, outer ul, body, html → red background

Sibling items and unrelated lists → unchanged

var parentEls = $( "b" ).parents()

  .map(function() {

    return this.tagName;

  })

  .get()

  .join( ", " );

$( "b" ).append( " <strong>" + parentEls + "</strong>" );

Each b shows: "My parents are: P, DIV, BODY, HTML"

Comma-separated ancestor tag names from .parents().map()

function showParents() {

  $( "div" ).css( "border-color", "white" );

  var len = $( "span.selected" )

    .parents( "div" )

    .css( "border", "2px red solid" )

    .length;

  $( "b" ).text( "Unique div parents: " + len );

}

$( "span" ).on( "click", function() {

  $( this ).toggleClass( "selected" );

  showParents();

});

Selected spans → red border on every div ancestor

Counter shows unique div count in the merged jQuery set

$( "#parent-demo li.item-a" ).parent().css( "outline", "2px solid red" );

$( "#parents-demo li.item-a" ).parents().css( "outline", "2px solid blue" );



// .parent() → 1 node | .parents() → ul, li, ul, body, html

.parent() → red outline on inner ul only

.parents() → blue outline on every ancestor chain element

$( "li.item-a" ).parents( "ul" ).addClass( "ancestor-list" );

Inner ul and outer ul → .ancestor-list class

li, body, html → skipped by the "ul" filter

🚀 Common Use Cases

• Highlight ancestor chain — official pattern: $("li.item-a").parents().css("background-color", "red").
• Find all container divs — $("span.selected").parents("div") for layout debugging.
• Breadcrumb context — .parents("li").map(...) to build a path from nested menu items.
• Form validation styling — $("input:invalid").parents(".form-row").addClass("error") when wrappers nest.
• Table row actions — $("td").parents("tr") when the click target is not the row itself.
• Inspect DOM hierarchy — official b demo: list ancestor tag names with .map().

📝 Notes

• Available since jQuery 1.0 — optional selector filters which ancestors are returned.
• Does not include the starting element — only ancestors above it (unlike .closest()).
• Travels all the way up — not limited to one level like .parent().
• $("html").parents() returns an empty set; $("html").parent() returns document.
• With multiple starting elements, result order reverses the original set and deduplicates.
• Pushes onto jQuery’s internal stack — pair with .end() to restore the previous set.

💡 Best Practices