.parents()

Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector.

.parents(selector)🡢 jQuery

selector Selector A string containing a selector expression to match elements against.

Given a jQuery object that represents a set of DOM elements, the .parents() method allows us to search through the ancestors of these elements in the DOM tree and construct a new jQuery object from the matching elements ordered from immediate parent on up; the elements are returned in order from the closest parent to the outer ones. When multiple DOM elements are in the original set, the resulting set will be in reverse order of the original elements as well, with duplicates removed.

The .parents() and .parent() methods are similar, except that the latter only travels a single level up the DOM tree. Also, $( "html" ).parent() method returns a set containing document whereas $( "html" ).parents() returns an empty set.

The method optionally accepts a selector expression of the same type that we can pass to the $() function. If the selector is supplied, the elements will be filtered by testing whether they match it.

Consider a page with a basic nested list on it:

<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii">
    II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">
        B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

If we begin at item A, we can find its ancestors:

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

The result of this call is a red background for the level-2 list, item II, and the level-1 list (and on up the DOM tree all the way to the <html> element). Since we do not supply a selector expression, all of the ancestors are part of the returned jQuery object. If we had supplied one, only the matching items among these would be included.

Find all parent elements of each b.

<div>
  <p>
    <span>
      <b>My parents are: </b>
    </span>
  </p>
</div>

CSS

b,
span,
p,
html body {
  padding: 0.5em;
  border: 1px solid;
}
b {
  color: blue;
}
strong {
  color: red;
}

HTML

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

DEMO

Click to find all unique div parent elements of each span.

<p>
  <div>
    <div><span>Hello</span></div>
      <span>Hello Again</span>
    </div>
    <div>
      <span>And Hello Again</span>
    </div>
  </p>
  <b>Click Hellos to toggle their parents.</b>

CSS

p,
div,
span {
  margin: 2px;
  padding: 1px;
}
div {
  border: 2px white solid;
}
span {
  cursor: pointer;
  font-size: 12px;
}
.selected {
  color: blue;
}
b {
  color: red;
  display: block;
  font-size: 14px;
}