1

我正在尝试使用 动态加载页面$.get()，使用 解析返回var $content = $(data)，并最终使用选择器仅查找文档的某些部分。只有我无法弄清楚为什么返回的 jQuery 集合$(data)没有找到一些非常基本的选择器。

我设置了一个jsFiddle 以使用非常小的 HTML 字符串来说明问题。

<html>
<head>
<title>See Our Events</title>
</head>
<body><div id="content">testing</div></body>
</html>

我想找到<title>节点。

var content = "<html>\n"+
"<head>\n"+
"  <title>See Our Events</title>\n"+
"</head>\n"+
"<body><div id=\"content\">testing</div></body>\n"+
"</html>";
var $content = $(content);
console.log($content.find('title').length); // Logs 0. Why?
console.log($content.html());               // Logs null. Why?

如果我将 a 包裹<div>在 HTML 周围，则选择器可以工作。（但是如果您查看 jsFiddle，选择器的其他变体仍然不起作用！）

var content = "<div><html>\n"+
"<head>\n"+
"  <title>See Our Events</title>\n"+
"</head>\n"+
"<body><div id=\"content\">testing</div></body>\n"+
"</html></div>";
var $content = $(content);
console.log($content.find('title').length); // Logs 1.
console.log($content.html());               // Logs subset of the source. Why?

请也看一下 jsFiddle。它包含比我的代码更多的示例，以使帖子更易于阅读。

为什么我原本非常基本的选择器不返回title节点？

4

2 回答 2

2

当您查看jQuery 文档时，您会看到一些关于使用$()函数创建新元素的解释。有一段特别说明了这里的问题：

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

看起来您可能无法正确创建一些基本元素。在引用的段落上方，您可以阅读有关如何解析和创建字符串的信息。

我能够通过以下方式在 Chrome 22 上创建节点：

var node = document.createElement('html');
node.innerHTML = "<head><title>Test me</title></head><body><div><p>Test 2</p></div></body>"

这创建了整个 DOM 节点并将其放入 jQuery 构造函数中允许我构建有效的 jQuery 对象，所以：

var nodeElem = $(node);
nodeElem.find('title'); //get 1 result

这是在 Chrome 22 上完成的，但结果可能因浏览器而异。

于 2012-09-26T22:12:47.147 回答
0

像这样的人是罪魁祸首

var $content = $(html);

您将字符串存储在#content

而你需要做

var $content = $('html');
于 2012-09-26T21:35:27.227 回答