title: Why is the following jQuery selector not returning both elements?
body: <p>I've run into a situation where I am creating a jQuery object from an html string and need to select all elements within it with a particular class.</p>
  
  <p>What I'm finding odd is that its returning one or the other, depending on which type of selecting mechanism I'm using. A test case is shown here:</p>
  
  <pre><code>var tmpl = '&lt;ul&gt;&lt;li class="foo"&gt;TEST&lt;/li&gt;&lt;/ul&gt;&lt;div class="foo"&gt;BAR&lt;/div&gt;';
  
  console.log( $('.foo', tmpl) ); //[&lt;li class="foo"&gt;TEST&lt;/li&gt;]
  console.log( $(tmpl).find('.foo') ); //[&lt;li class="foo"&gt;TEST&lt;/li&gt;]
  console.log( $(tmpl).filter('.foo') ); //[&lt;div class="foo"&gt;BAR&lt;/div&gt;]
  </code></pre>
  
  <p><a href="http://jsfiddle.net/Rfq9F/" rel="nofollow">http://jsfiddle.net/Rfq9F/</a></p>
  
  <p>In this example, both an li element in a ul and a non-descendant div have the class "foo". In the example, I use the .foo selector and set context to the template string. Second, I use .find() on the string. Finally, I use .filter() on the string. </p>
  
  <p>Can someone explain why the selector mechanisms are acting as they do, and also how to achieve the goal I mentioned in the beginning?</p>