title: jQuery find child based on class selector matching parents
body: <p>I am trying to find the descendants of a particular node using the jquery <code>.find()</code> method. I have noticed that <code>.find()</code> doesnt match elements based on properties of parents above the current node in the tree. The first find returns 0 elements, but the second find returns the element I was searching for. My question is, is this a limitation of the selector pattern allowed for the find method and is find the only jquery function that has this limitation? I would have expected both of these to return the same element. Also, is there another jquery method that would more succinctly accomplish the same thing as second one. This is a simplified example of what I'm trying to do and I cannot remove the <code>.find('.input-group')</code> as this is an input into my function.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).find('.input-group').find('.form-group .form-control')
  $(document).find('.input-group').find('.form-control').filter('.form-group .form-control')</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  
  &lt;body&gt;
    &lt;div class="form-group"&gt;
      &lt;div class="input-group"&gt;
        &lt;span class="input-group-addon"&gt;
         &lt;input type="checkbox" aria-label="CVV Disabled" value=""&gt;
      &lt;/span&gt;
        &lt;input id="vtCvv" name="vtCvv" type="password" class="form-control" required="true" data-bv-field="vtCvv"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>