我使用$.get或加载一些HTML $.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);
> $ doc
[<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
[]
咦？
好.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对象.然而,这似乎是一个越来越令人困惑的折磨.我只是做了一些根本错误的事情吗？为什么这么复杂？
阅读jQuery文档 - 它解决了这个问题.
当你有一个包含HTML字符串<html>,<head>或<body>元素,你这样做:
$(str)
那些元素将被忽略.只有可以放在DIV中的元素才有效,并且会添加到生成的jQuery实例对象中.
$div = $data.find('div');
这将导致一个空的jQuery对象,因为find()搜索当前元素集的后代(在你的情况下是一个TITLE元素和一个DIV元素 - 而这两个元素没有后代DIV元素).
为了从jQuery对象中删除Text Node对象,我推荐这种方法:
$data.filter(function() { return this.nodeType === 1; });
为了获得DIV元素,我推荐这种方法:
$('<div>').html(str).find('div');
str你的HTML字符串在哪里.
替代方法:
$(str).filter('div');
| 归档时间： |
|
| 查看次数： |
2060 次 |
| 最近记录： |