Question

如果我执行以下操作，则分别返回0和2：

$html = $(document.createDocumentFragment());
$html.append('<a href="#">First link</a><a href="#">Second link</a>');

console.log($html.find('a').length);
console.log($html[0].querySelectorAll('a').length);

如何才能使jQuery方法也能正常工作？所以基本上，我希望能够使用jQuery搜索文档片段，而不需要使用本机JavaScript DOM函数来回切换。

Answer 1

您需要将字符串片段传递给jQuery并保存对它的引用：

var $html = $(document.createDocumentFragment());
var $fragment = $('<a href="#">First link</a><a href="#">Second link</a>');
$html.append($fragment);

console.log($fragment.filter('a').length);
console.log($html[0].querySelectorAll('a').length);

然后可以遍历解析的片段。请注意，find已在此处替换为filter，因为我们引用了a个元素的集合，find仅适用于包含元素的子元素。< / p>

这将按预期记录2和2。演示：http://jsfiddle.net/fec9csxu/

Answer 2

在这里，这可能会有所帮助：

var $html = $("html");
$html.append('<a href="#">First link</a><a href="#">Second link</a>');
console.log($html.find('a').length);
console.log($html[0].querySelectorAll('a').length);

给出预期的输出2和2.

使用jQuery＆＃34; find＆＃34;在jQuery文档片段中查找元素。

2 个答案: