我使用加载一些 HTML$.get
or $.ajax
。在 Chrome 和 Firefox 的调试器中,我可以看到 html 已正确加载:
> 数据
"<html><head><title></title></head><body>
<div id="topdiv" style="display:none;width:880px; height:600px;"></div>
</body</html>"
所以它是一个 HTML 字符串。伟大的。接下来我尝试使用 jQuery 来解析它:
$doc = $(data);
> $文档
[<TextNode textContent="\n\n">,
title,
<TextNode textContent="\n\n\n">,
div#topdiv,
<TextNode textContent="\n \n">]
哇啊,什么?哪里html
, head
, body
去?好吧,无论如何,我只关心 div
$div = $data.find('div');
> $div
[]
Huh??
好的。 div 是空的。经过进一步的实验,我意识到 jQuery 基本上忽略了任何顶级标签。那么它实际上并不让您选择任何二级标签,因此如果有一个 div 嵌套在外部 div 内,那么它将被选择。但是...什么?
看起来 jQuery 对那些“TextNode”元素有点窒息,奇怪的是,它创建了自己(而不是 html、body)。因此,我编写了一些代码来通过循环元素并直接提取非文本节点来解决这个问题:
function getNodes($doc) {
var result = new Array();
for (var i = 0; i < $doc.length; i++) {
if ($doc[i].hasOwnProperty("tagName")) {
result.push($doc[i]);
}
}
return $(result);
}
效果很好!在 Chrome 上。
在 Firefox 中尝试过,但没有任何效果。
事实证明,并非 Firefox 中的每个对象都有hasOwnProperty
功能。什么??好的。所以重写为:
typeof($tempHtml[i].tagName) !== 'undefined'
最后,它也适用于 Firefox。
哇。我只是愚蠢吗?为什么仅仅将 HTML 字符串转换为 jQuery 对象就需要如此多的后处理?我觉得我一定错过了一些明显的东西。有没有一种方法可以做到这一点而不涉及这种混乱?
我想做的就是加载一些 HTML 并将其转换为 jQuery 对象。然而,这似乎是一个越来越令人困惑的考验。我只是做了一些根本性错误的事情吗?为什么这么复杂?