.parents()
Categories: Tree Traversal
.parents( [ selector ] )Returns: jQuery
Description: Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector.
-
.parents( [ selector ] )
version added: 1.0selector 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. The .parents()
and .parent()
methods are similar, except that the latter only travels a single level up the DOM tree.
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.
HTML:
<div> <p> <span> <b>My parents are: </b> </span> </p> </div>
CSS:
b, span, p, html body { padding: .5em; border: 1px solid; } b { color:blue; } strong { color:red; }
Code:
var parentEls = $("b").parents() .map(function () { return this.tagName; }) .get().join(", "); $("b").append("<strong>" + parentEls + "</strong>");
-
Click to find all unique div parent elements of each span.
HTML:
<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; }
Code:
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").click(function () { $(this).toggleClass("selected"); showParents(); });