Why can't you select top level elements in an HTML string with jQuery, and how do you get around it?
<p>I have some HTML stored in a string which I parse using jQuery. The HTML is something like:</p>

<pre><code>&lt;div class='person'&gt;
    &lt;span class='name'&gt;Joey&lt;/span&gt;
    &lt;img class='avatar' src='...'/&gt;
&lt;/div&gt;
&lt;div class='person'&gt;
    &lt;span class='name'&gt;Dee Dee&lt;/span&gt;
    &lt;img class='avatar' src='...'/&gt;
&lt;/div&gt;
&lt;div class='person'&gt;
    &lt;span class='name'&gt;Tommy&lt;/span&gt;
    &lt;img class='avatar' src='...'/&gt;
&lt;/div&gt;
&lt;div class='person'&gt;
    &lt;span class='name'&gt;Johnny&lt;/span&gt;
    &lt;img class='avatar' src='...'/&gt;
&lt;/div&gt;
</code></pre>

<p>So I use jQuery to parse the HTML like this (suppose the HTML is stored in the variable 'data'):</p>

<p><code>$(".name", data)</code> returns all the .name elements</p>

<p><code>$(".avatar", data)</code> returns all the .avatar elements</p>

<p>BUT <code>$(".person", data)</code> returns and empty object. </p>

<p><strong>So apparently jQuery cant parse the top level elements. Why is this? What is the best way to get around it?</strong> </p>

<p>Of course I can always insert 'data' inside a dummy element and then parse it, but that doesn´t seem a very elegant solution to me...</p>
