A repository of over 1000 quality jQuery plugins

jQuery .parents()

Learn all about the jQuery function .parents().

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<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:

1
 
$( "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.