jquery - 为什么不能使用 jQuery 选择 HTML 字符串中的顶级元素，如何解决它？

Question

我有一些 HTML 存储在一个字符串中，我使用 jQuery 对其进行解析。 HTML 类似于:

<div class='person'>
    <span class='name'>Joey</span>
    <img class='avatar' src='...'/>
</div>
<div class='person'>
    <span class='name'>Dee Dee</span>
    <img class='avatar' src='...'/>
</div>
<div class='person'>
    <span class='name'>Tommy</span>
    <img class='avatar' src='...'/>
</div>
<div class='person'>
    <span class='name'>Johnny</span>
    <img class='avatar' src='...'/>
</div>

所以我使用 jQuery 来解析 HTML，如下所示(假设 HTML 存储在变量“data”中):

$(".name", data) 返回所有 .name 元素

$(".avatar", data) 返回所有 .avatar 元素

BUT $(".person", data) 返回空对象。

显然 jQuery 无法解析顶级元素。为什么是这样？解决这个问题的最佳方法是什么？

当然，我总是可以在虚拟元素中插入“数据”，然后解析它，但这对我来说似乎不是一个非常优雅的解决方案......

Answer 1

来自docs -

Internally, selector context is implemented with the .find() method, so $('span', this) is equivalent to $(this).find('span').

然后从 ' find ' 文档 -

Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.

因此 $(".person", data) 选择器将始终返回一个空结果集(因为它不包含“.person”后代)，除非您在搜索之前将其包装在虚拟对象中.