javascript - 如果不添加到 DOM，jQuery 发现在顶级元素中不起作用

Question

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

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

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

当我简单地输入 result 时，我可以看到它包含进入控制台，它在那里完全相同的 ID，没有拼写错误或任何东西。

然而，result.find(selector)返回 0 个元素。

在我的具体示例中，这是 result :

并且:

为什么？

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

更新 2: 试试 $('<div id="target"></div>').find("#target")你会得到 0 个结果，显然你应该得到 div .

Answer 1

没有。这不是错误，这是 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');

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