Question

我有以下jQuery行：

$('<html><a href="cnn.com">hi</a></html>').find('a')

我希望结果是一个包含一个元素的集合。但结果是一个空数组（[]）。为什么呢？

- 编辑 -

出于某种原因，下面的代码可以使用。

$('<html><div><a href="cnn.com">hi</a></div></html>').find('a');

为什么会这样？

Answer 1

那是因为解析字符串时会删除html元素：

> $('<html><a href="cnn.com">hi</a></html>')
[<a href="cnn.com">hi</a>]

即。当前集合包含您尝试find()的元素。由于顶级a元素没有（并且可以＆＃39; ）有a个后代，find()调用将返回一个空集合

来自jQuery documentation：

传递复杂的HTML时，某些浏览器可能无法生成完全复制所提供的HTML源的DOM。如上所述，jQuery使用浏览器的.innerHTML属性来解析传递的HTML并将其插入到当前文档中。在此过程中，某些浏览器会过滤掉某些元素，例如<html>，<title>或<head>元素。因此，插入的元素可能无法代表传递的原始字符串。

修改：第二个代码段可以find() a元素，因为当html元素被剥离时，集合的顶级元素是{{ 1}}具有div后代的元素。

Answer 2

与.find()描述

的文档一样

获取当前匹配元素集中每个元素的后代，由选择器，jQuery对象或元素过滤。

$('<html><a href="cnn.com">hi</a></html>')

只会提供a标记的对象。

Demo

如果你的html-string中有多个锚标签，你可以过滤它们，例如：

var elem = $('<html><a href="cnn.com">hi</a><a href="cnn1.com">hi</a></html>');
var filter = elem.filter(function(){
    return $(this).attr('href') === "cnn.com";
});

Demo

修改

传递复杂的HTML时，某些浏览器可能无法生成DOM   它完全复制了提供的HTML源代码。如上所述，jQuery   使用浏览器的.innerHTML属性来解析传递的HTML和   将其插入当前文档。在这个过程中，一些   浏览器过滤掉某些元素，例如<html>，<title>或   <head>元素。结果，插入的元素可能不是   传递原始字符串的代表。

来源：http://api.jquery.com/jQuery/#jQuery2一直到Creating New Elements段

所以jQuery使用.innerHTML。根据{{3}}


删除所有元素的子元素，解析内容字符串和   将结果节点指定为元素的子节点。

因此html-string <html><a href="#">test</a></html>被剥离到<a></a>。在锚点周围包裹div时，锚点会保持一个元素的下降，因此可以通过.find() - 函数找到它。

Answer 3

您应该阅读Jquery docs about find()

上的文档

$('html').find('a');

选中此jsfiddle

JQuery正在为函数'find'工作：

3 个答案: