Given a jQuery object that represents a set of DOM elements, the parent() method traverses to the immediate parent of each of these elements in the DOM tree and constructs a new jQuery object from the matching elements.
This method is similar to .parents(), except .parent() 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 parents:
1 | $( "li.item-a" ).parent().css( "background-color", "red" ); |
The result of this call is a red background for the level-2 list. Since we do not supply a selector expression, the parent element is unequivocally included as part of the object. If we had supplied one, the element would be tested for a match before it was included.
A string containing a selector expression to match elements against.
Shows the parent of each element as (parent > child). Check the View Source to see the raw html.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>parent demo</title> <style> div, p { margin: 10px; } </style></head><body> <div>div, <span>span, </span> <b>b </b></div> <p>p, <span>span, <em>em </em> </span></p> <div>div, <strong>strong, <span>span, </span> <em>em, <b>b, </b> </em> </strong> <b>b </b></div> <script>$( "*", document.body ).each(function() { var parentTag = $( this ).parent().get( 0 ).tagName; $( this ).prepend( document.createTextNode( parentTag + " > " ) );});</script> </body></html> |
Find the parent element of each paragraph with a class "selected".
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>parent demo</title></head><body> <div><p>Hello</p></div><div class="selected"><p>Hello Again</p></div> <script>$( "p" ).parent( ".selected" ).css( "background", "yellow" );</script> </body></html> |
Please login to continue.