title: Jquery/javascript, filtering html object from ajax response
body: <p>I have this piece of html:</p>
  
  <pre><code>&lt;div id="1"&gt;
    &lt;div class="text"&gt;
       Text for div 2 
    &lt;/div&gt;
  &lt;img src="images/image1.jpg"&gt;&lt;/img&gt;
  &lt;/div&gt;
  
  &lt;div id="2"&gt;
    &lt;div class="text"&gt;
      Text in div 2
    &lt;/div&gt;
    &lt;img src="images/image2.jpg"&gt;&lt;/img&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Which I grab with a simple .ajax-call</p>
  
  <pre><code>var html = $.ajax({
           url: "htmlsnippet.html",
           cache: false,
           async: false,
           dataType: "html"
           }).responseText;
  </code></pre>
  
  <p>If I filter it with:</p>
  
  <pre><code>var htmlFiltered = $(html).filter("#1");
  </code></pre>
  
  <p>it works just fine, I get the whole div with id="1",<br>
  but if I use:</p>
  
  <pre><code>var htmlFiltered = $(html).filter("#1 .text");
  </code></pre>
  
  <p>the htmlFiltered variable is an empty object.
  I can't figure out what I'm doing wrong.</p>