1 line
5.2 KiB
JSON
1 line
5.2 KiB
JSON
{"name":"find","type":"method","title":".find()","deprecated":null,"removed":null,"desc":"Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.","categories":["traversing/tree-traversal","version/1.0","version/1.6"],"entries":[{"return":"jQuery","signatures":[{"added":"1.0","argument":{"desc":"A string containing a selector expression to match elements against.","name":"selector","type":"Selector"}},{"added":"1.6","argument":{"desc":"A jQuery object to match elements against.","name":"jQuery object","type":"Object"}},{"added":"1.6","argument":{"desc":"An element to match elements against.","name":"element","type":"Element"}}],"examples":[{"desc":"Starts with all paragraphs and searches for descendant span elements, same as <code>$( \"p span\" )</code>","code":"\n$( \"p\" ).find( \"span\" ).css( \"color\", \"red\" );\n","html":"\n<p><span>Hello</span>, how are you?</p>\n<p>Me? I'm <span>good</span>.</p>\n"},{"desc":"A selection using a jQuery collection of all span tags. Only spans within p tags are changed to red while others are left blue.","css":"\n span {\n color: blue;\n }\n","code":"\nvar spans = $( \"span\" );\n$( \"p\" ).find( spans ).css( \"color\", \"red\" );\n","html":"\n<p><span>Hello</span>, how are you?</p>\n<p>Me? I'm <span>good</span>.</p>\n<div>Did you <span>eat</span> yet?</div>\n"},{"desc":"Add spans around each word then add a hover and italicize words with the letter <strong>t</strong>.","code":"\nvar newText = $( \"p\" ).text().split( \" \" ).join( \"</span> <span>\" );\nnewText = \"<span>\" + newText + \"</span>\";\n\n$( \"p\" )\n .html( newText )\n .find( \"span\" )\n .hover(function() {\n $( this ).addClass( \"hilite\" );\n }, function() {\n $( this ).removeClass( \"hilite\" );\n })\n .end()\n .find( \":contains('t')\" )\n .css({\n \"font-style\": \"italic\",\n \"font-weight\": \"bolder\"\n });\n","css":"\n p {\n font-size: 20px;\n width: 200px;\n color: blue;\n font-weight: bold;\n margin: 0 10px;\n }\n .hilite {\n background: yellow;\n }\n","html":"\n<p>\n When the day is short\n find that which matters to you\n or stop believing\n</p>\n"}],"longdesc":"\n <p>Given a jQuery object that represents a set of DOM elements, the <code>.find()</code> method allows us to search through the descendants of these elements in the DOM tree and construct a new jQuery object from the matching elements. The <code>.find()</code> and <code>.children()</code> methods are similar, except that the latter only travels a single level down the DOM tree.</p>\n <p>The first signature for the <code>.find()</code>method accepts a selector expression of the same type that we can pass to the <code>$()</code> function. The elements will be filtered by testing whether they match this selector.</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 II, we can find list items within it:</p>\n <pre><code>\n$( \"li.item-ii\" ).find( \"li\" ).css( \"background-color\", \"red\" );\n </code></pre>\n <p>The result of this call is a red background on items A, B, 1, 2, 3, and C. Even though item II matches the selector expression, it is not included in the results; only descendants are considered candidates for the match.</p>\n <div class=\"warning\">\n <p>Unlike most of the tree traversal methods, the selector expression is required in a call to <code>.find()</code>. If we need to retrieve all of the descendant elements, we can pass in the universal selector <code>'*'</code> to accomplish this.</p>\n </div>\n <p><a href=\"/jquery/#selector-context\">Selector context</a> is implemented with the <code>.find()</code> <code>method;</code> therefore, <code>$( \"li.item-ii\" ).find( \"li\" )</code> is equivalent to <code>$( \"li\", \"li.item-ii\" )</code>.</p>\n <p><strong>As of jQuery 1.6</strong>, we can also filter the selection with a given jQuery collection or element. With the same nested list as above, if we start with:</p>\n <pre><code>\nvar allListElements = $( \"li\" );\n </code></pre>\n <p>And then pass this jQuery object to find:</p>\n <pre><code>\n$( \"li.item-ii\" ).find( allListElements );\n </code></pre>\n <p>This will return a jQuery collection which contains only the list elements that are descendants of item II.</p>\n <p>Similarly, an element may also be passed to find:</p>\n <pre><code>\nvar item1 = $( \"li.item-1\" )[ 0 ];\n$( \"li.item-ii\" ).find( item1 ).css( \"background-color\", \"red\" );\n </code></pre>\n <p>The result of this call would be a red background on item 1.</p>\n "}]} |