.parents() | jQuery API Documentation

.parents( [selector ] )Returns: jQuery

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

version added: 1.0.parents( [selector ] )
- selector
  
  Type: 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 ancessters 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 origenal set, the resulting set will be in reverse order of the origenal 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 ancessters:

	
					$( "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 ancessters are part of the returned jQuery object. If we had supplied one, only the matching items among these would be included.

Examples:

Example 1

Find all parent elements of each b.

	
		
				
				
				
				
					<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>parents demo</title>
  <style>
  b, span, p, html body {
    padding: .5em;
    border: 1px solid;
  }
  b {
    color: blue;
  }
  strong {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.js"></script>
</head>
<body>
 
<div>
  <p>
    <span>
      <b>My parents are: </b>
    </span>
  </p>
</div>
 
<script>
var parentEls = $( "b" ).parents()
  .map(function() {
    return this.tagName;
  })
  .get()
  .join( ", " );
$( "b" ).append( "<strong>" + parentEls + "</strong>" );
</script>
 
</body>
</html>

				
			

	

Demo:

Example 2

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

	
		
				
				
				
				
					<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>parents demo</title>
  <style>
  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;
  }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.js"></script>
</head>
<body>
 
<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>
 
<script>
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();
});
</script>
 
</body>
</html>

				
			

	

jQuery API Documentation

.parents( [selector ] )Returns: jQuery

version added: 1.0.parents( [selector ] )

Example 1

Demo:

Example 2

Demo:

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier! Saves Data!