1 line
4.2 KiB
JSON
1 line
4.2 KiB
JSON
{"name":"parents","type":"method","title":".parents()","deprecated":null,"removed":null,"desc":"Get the ancestors 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":"Find all parent elements of each b.","code":"\nvar parentEls = $( \"b\" ).parents()\n .map(function() {\n return this.tagName;\n })\n .get()\n .join( \", \" );\n$( \"b\" ).append( \"<strong>\" + parentEls + \"</strong>\" );\n","css":"\n b, span, p, html body {\n padding: .5em;\n border: 1px solid;\n }\n b {\n color: blue;\n }\n strong {\n color: red;\n }\n","html":"\n<div>\n <p>\n <span>\n <b>My parents are: </b>\n </span>\n </p>\n</div>\n"},{"desc":"Click to find all unique div parent elements of each span.","code":"\nfunction showParents() {\n $( \"div\" ).css( \"border-color\", \"white\" );\n var len = $( \"span.selected\" )\n .parents( \"div\" )\n .css( \"border\", \"2px red solid\" )\n .length;\n $( \"b\" ).text( \"Unique div parents: \" + len );\n}\n$( \"span\" ).click(function() {\n $( this ).toggleClass( \"selected\" );\n showParents();\n});\n","css":"\n p, div, span {\n margin: 2px;\n padding: 1px;\n }\n div {\n border: 2px white solid;\n }\n span {\n cursor: pointer;\n font-size: 12px;\n }\n .selected {\n color: blue;\n }\n b {\n color: red;\n display: block;\n font-size: 14px;\n }\n","html":"\n<p>\n <div>\n <div><span>Hello</span></div>\n <span>Hello Again</span>\n </div>\n <div>\n <span>And Hello Again</span>\n </div>\n </p>\n <b>Click Hellos to toggle their parents.</b>\n"}],"longdesc":"\n <p>Given a jQuery object that represents a set of DOM elements, the <code>.parents()</code> 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. When multiple DOM elements are in the original set, the resulting set will be in <em>reverse</em> order of the original elements as well, with duplicates removed.</p>\n <p>The <code>.parents()</code> and <code><a href=\"/parent/\">.parent()</a></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 ancestors:</p>\n <pre><code>\n$( \"li.item-a\" ).parents().css( \"background-color\", \"red\" );\n </code></pre>\n <p>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 <code><html></code> 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.</p>\n "}]} |