javascript - jQuery如果未添加到DOM中，则无法在顶级元素中使用

我正在用jQuery异步加载一些HTML:

$.get(path, {}, function (data) {
    var result = $(data);
    var resultSelector = result.find(selector);
});

result是一个有效的HTML，其中包含我的选择器(在我的特定情况下为"#UsersAndRolesResults")。

当我在控制台中简单地键入result时，我就能看到它包含的内容，它的ID完全相同，没有错别字或其他任何内容。

但是，result.find(selector)返回0个元素。

在我的特定示例中，这是result:



和:



为什么？

更新:我可以使用其ID标记查询#UsersAndRolesResults内的其他元素，并正确返回它们。我也无法查询结果中的任何其他顶级元素。我认为查询结果中的顶级元素存在问题。

更新2:只需尝试$('<div id="target"></div>').find("#target")，您将获得0个结果，您显然应该在其中获得div。

最佳答案

不。这不是bug，这是jQuery中定义的行为。
find()用于选择调用find的元素内部的元素。在您的情况下，该元素不是选择器的子级，因此find将不起作用。

例子:

<div id="container">
    <div class="message">Hello World!</div>
    <div>Bye World</div>
</div>

JavaScript:

$('#container').find('.message');

这将选择具有message类且位于具有ID container的元素内的元素。

但是，如果您使用find，它将不返回任何内容，即为空数组，因为#container中没有元素#container。

$('#container').find('#container');

您的代码等效于此^^^。

如果需要，可以使用filter。 filter将遍历每个元素，并检查它是否与选择器匹配，如果匹配，则将该元素添加到结果集中。

$('#container').filter('#container');

这将为您提供完整的元素。

关于javascript - jQuery如果未添加到DOM中，则无法在顶级元素中使用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38034943/