1 line
3.2 KiB
JSON
1 line
3.2 KiB
JSON
{"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<ul class=\"level-1\">\n <li class=\"item-i\">I</li>\n <li class=\"item-ii\">II\n <ul class=\"level-2\">\n <li class=\"item-a\">A</li>\n <li class=\"item-b\">B\n <ul class=\"level-3\">\n <li class=\"item-1\">1</li>\n <li class=\"item-2\">2</li>\n <li class=\"item-3\">3</li>\n </ul>\n </li>\n <li class=\"item-c\">C</li>\n </ul>\n </li>\n <li class=\"item-iii\">III</li>\n</ul>\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 "}]} |