{"name":"parent","type":"method","title":".parent()","deprecated":null,"removed":null,"desc":"Get the parent of each element in the current set of matched elements, optionally filtered by a selector.","categories":["traversing/tree-traversal","version/1.0"],"entries":[{"return":"jQuery","signatures":{"added":"1.0","argument":{"desc":"A string containing a selector expression to match elements against.","name":"selector","optional":"true","type":"Selector"}},"examples":[{"desc":"Shows the parent of each element as (parent > child).  Check the View Source to see the raw html.","code":"\n$( \"*\", document.body ).each(function() {\n  var parentTag = $( this ).parent().get( 0 ).tagName;\n  $( this ).prepend( document.createTextNode( parentTag + \" > \" ) );\n});\n","css":"\n  div, p {\n    margin: 10px;\n  }\n","html":"\n<div>div,\n  <span>span, </span>\n  <b>b </b>\n</div>\n\n<p>p,\n  <span>span,\n    <em>em </em>\n  </span>\n</p>\n\n<div>div,\n  <strong>strong,\n    <span>span, </span>\n    <em>em,\n      <b>b, </b>\n    </em>\n  </strong>\n  <b>b </b>\n</div>\n"},{"desc":"Find the parent element of each paragraph with a class \"selected\".","code":"\n$( \"p\" ).parent( \".selected\" ).css( \"background\", \"yellow\" );\n","html":"\n<div><p>Hello</p></div>\n<div class=\"selected\"><p>Hello Again</p></div>\n"}],"longdesc":"\n    <p>Given a jQuery object that represents a set of DOM elements, the <code>.parent()</code> method allows us to search through the parents of these elements in the DOM tree and construct a new jQuery object from the matching elements.</p>\n    <p>The <code><a href=\"/parents/\">.parents()</a></code> and <code>.parent()</code> methods are similar, except that the latter only travels a single level up the DOM tree. Also, <code>$( \"html\" ).parent()</code> method returns a set containing <code>document</code> whereas <code>$( \"html\" ).parents()</code> returns an empty set.</p>\n    <p>The method optionally accepts a selector expression of the same type that we can pass to the <code>$()</code> function. If the selector is supplied, the elements will be filtered by testing whether they match it.</p>\n    <p>Consider a page with a basic nested list on it:</p>\n    <pre><code>\n&lt;ul class=\"level-1\"&gt;\n  &lt;li class=\"item-i\"&gt;I&lt;/li&gt;\n  &lt;li class=\"item-ii\"&gt;II\n    &lt;ul class=\"level-2\"&gt;\n      &lt;li class=\"item-a\"&gt;A&lt;/li&gt;\n      &lt;li class=\"item-b\"&gt;B\n        &lt;ul class=\"level-3\"&gt;\n          &lt;li class=\"item-1\"&gt;1&lt;/li&gt;\n          &lt;li class=\"item-2\"&gt;2&lt;/li&gt;\n          &lt;li class=\"item-3\"&gt;3&lt;/li&gt;\n        &lt;/ul&gt;\n      &lt;/li&gt;\n      &lt;li class=\"item-c\"&gt;C&lt;/li&gt;\n    &lt;/ul&gt;\n  &lt;/li&gt;\n  &lt;li class=\"item-iii\"&gt;III&lt;/li&gt;\n&lt;/ul&gt;\n    </code></pre>\n    <p>If we begin at item A, we can find its parents:</p>\n    <pre><code>\n$( \"li.item-a\" ).parent().css( \"background-color\", \"red\" );\n    </code></pre>\n    <p>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.</p>\n  "}]}