jQuery .parents() Method

What Is .parents()?

.parents([selector]) (since jQuery 1.0) returns all ancestors of each matched element — from the immediate parent outward toward the document root. Optional selector keeps only ancestors that match. Returns a new jQuery set; does not change the DOM.

$("li.item-a").parents();              // all ancestors
$("li.item-a").parents("ul");          // only ul ancestors
$("span").parents("div");              // every wrapping div

// parents()  → all ancestors
// parent()   → one level up
// closest()  → nearest match (incl. self)
// parentsUntil() → ancestors until a stop

How to Use .parents()

Select a descendant, then collect every ancestor (or only those that match).

1. Select the starting element(s) — e.g. $("li.item-a").
2. Call .parents() to collect every ancestor up the tree.
3. Or pass a selector: .parents("ul") to keep matching ancestors only.
4. Chain methods on the new set (.append(), .addClass(), …).
5. Order is closest parent first, then outward; duplicates are removed.

Pseudocode

call $(starts).parents(selector?)

result = empty set
for each start in the matched set:
    node = start.parentElement
    while node is an element:
        if no selector OR node matches selector:
            add node to result
        node = node.parentElement

return unique ancestors as a new jQuery object
(ordered closest parent → outermost)

Cheat Sheet

Keep these upward methods side by side.

Live Preview

From li.item-a, compare .parents(), .parents("ul"), .parent(), and .closest("ul").

Ready — choose a call and click Run.

jQuery Examples

Short, copy-ready snippets. Open DevTools, or use Try It Yourself for a live editor.

$("li.item-a").parents().append(" [ancestor]");

Inner ul, li II, outer ul, body, html…
Each gets [ancestor]

var parentEls = $("b").parents()
  .map(function () {
    return this.tagName;
  })
  .get()
  .join(", ");
$("b").append(" " + parentEls);

My parents are: STRONG, P, DIV, BODY, HTML
(tags from closest parent outward)

$("span").on("click", function () {
  $(this).toggleClass("selected");
  var len = $("span.selected").parents("div").length;
  $("b").text("Unique div parents: " + len);
});

Click Hellos → Unique div parents: N
Shared ancestors are counted once

$("#parent-demo li.item-a").parent().append(" [parent]");
$("#parents-demo li.item-a").parents().append(" [parents]");

.parent() → inner ul only [parent]
.parents() → every ancestor [parents]

$("li.item-a").parents("ul").append(" [ul]");

Inner ul and outer ul get [ul]
li / body / html are skipped

Performance Notes

Prefer .closest() when you need one match. Use .parents() when you truly need the chain.

Key Takeaways