{"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&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 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  "}]}