1 line
5.0 KiB
JSON
1 line
5.0 KiB
JSON
{"name":"children","type":"method","title":".children()","deprecated":null,"removed":null,"desc":"Get the children of each element in the 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 children of the clicked element.","code":"\n$( \"#container\" ).click(function ( event ) {\n $( \"*\" ).removeClass( \"hilite\" );\n var kids = $( event.target ).children();\n var len = kids.addClass( \"hilite\" ).length;\n\n $( \"#results span:first\" ).text( len );\n $( \"#results span:last\" ).text( event.target.tagName );\n\n event.preventDefault();\n});\n","css":"\n body {\n font-size: 16px;\n font-weight: bolder;\n }\n div {\n width: 130px;\n height: 82px;\n margin: 10px;\n float: left;\n border: 1px solid blue;\n padding: 4px;\n }\n #container {\n width: auto;\n height: 105px;\n margin: 0;\n float: none;\n border: none;\n }\n .hilite {\n border-color: red;\n }\n #results {\n display: block;\n color: red;\n }\n p, span, em, a, b, button {\n border: 1px solid transparent;\n }\n p {\n margin: 10px;\n }\n span {\n color: blue;\n }\n input {\n width: 100px;\n }\n","html":"\n<div id=\"container\">\n <div>\n <p>This <span>is the <em>way</em> we</span>\n write <em>the</em> demo,</p>\n </div>\n\n <div>\n <a href=\"#\"><b>w</b>rit<b>e</b></a> the <span>demo,</span> <button>write\n the</button> demo,\n </div>\n\n <div>\n This <span>the way we <em>write</em> the <em>demo</em> so</span>\n <input type=\"text\" value=\"early\"> in\n </div>\n\n <p>\n <span>t</span>he <span>m</span>orning.\n <span id=\"results\">Found <span>0</span> children in <span>TAG</span>.</span>\n </p>\n</div>\n"},{"desc":"Find all children of each div.","code":"\n$( \"div\" ).children().css( \"border-bottom\", \"3px double red\" );\n","css":"\n body {\n font-size: 16px;\n font-weight: bolder;\n }\n span {\n color: blue;\n }\n p {\n margin: 5px 0;\n }\n","html":"\n<p>Hello (this is a paragraph)</p>\n\n<div><span>Hello Again (this span is a child of the a div)</span></div>\n<p>And <span>Again</span> (in another paragraph)</p>\n\n<div>And One Last <span>Time</span> (most text directly in a div)</div>\n"},{"desc":"Find all children with a class \"selected\" of each div.","code":"\n$( \"div\" ).children( \".selected\" ).css( \"color\", \"blue\" );\n","css":"\n body {\n font-size: 16px;\n font-weight: bolder;\n }\n p {\n margin: 5px 0;\n }\n","html":"\n<div>\n <span>Hello</span>\n <p class=\"selected\">Hello Again</p>\n <div class=\"selected\">And Again</div>\n <p>And One Last Time</p>\n</div>\n"}],"longdesc":"\n <p>Given a jQuery object that represents a set of DOM elements, the <code>.children()</code> method allows us to search through the children of these elements in the DOM tree and construct a new jQuery object from the matching elements. The <code>.children()</code> method differs from <code><a href=\"/find/\">.find()</a></code> in that <code>.children()</code> only travels a single level down the DOM tree while <code>.find()</code> can traverse down multiple levels to select descendant elements (grandchildren, etc.) as well. Note also that like most jQuery methods, <code>.children()</code> does not return text nodes; to get <em>all</em> children including text and comment nodes, use <code><a href=\"/contents/\">.contents()</a></code>.</p>\n <p>The <code>.children()</code> 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 the level-2 list, we can find its children:</p>\n <pre><code>$( \"ul.level-2\" ).children().css( \"background-color\", \"red\" );</code></pre>\n <p>The result of this call is a red background behind items A, B, and C. Since we do not supply a selector expression, all of the children are part of the returned jQuery object. If we had supplied one, only the matching items among these three would be included.</p>\n "}]} |