jQuery解析原始HTML，并在Firefox上具有hasOwnProperty [英] jQuery parsing raw HTML, and hasOwnProperty on Firefox
问题描述
我使用$.get或$.ajax加载了一些HTML.在Chrome和Firefox的调试器中，我可以看到html已正确加载:
I load up some HTML using $.get or $.ajax. In the debugger for both Chrome and Firefox i can see the html has been loaded properly:
>数据
"<html><head><title></title></head><body>
<div id="topdiv" style="display:none;width:880px; height:600px;"></div>
</body</html>"
所以它是HTML字符串.伟大的.接下来，我尝试使用jQuery对其进行解析:
So it's a string of HTML. Great. Next I try to use jQuery to parse it:
$doc = $(data);
> $ doc
[<TextNode textContent="\n\n">,
title,
<TextNode textContent="\n\n\n">,
div#topdiv,
<TextNode textContent="\n \n">]
哇，什么? html，head，body去哪里了?好吧，无论如何，我只关心div
Whoah, what? Where did html, head, body go? OK, well anyway, all I care about is the div
$div = $data.find('div');
> $ div
[]
嗯?
好. div为空.经过进一步的实验，我意识到jQuery基本上会忽略任何顶级标签.然后，它实际上不允许您选择任何第二级标签，因此，如果在外部div内嵌套了一个div，则将选择该div.但是...什么??
OK. The div is empty. Upon further experimentation, I realize that jQuery basically ignores any top-level tags. Then it doesn't actually let you select any 2nd level tags, and so if there is a div nested inside the outer div, that WILL be selected. But... what??
奇怪的是，jQuery会自行创建(而不是html正文)，这对那些"TextNode"元素似乎是jQuery的扼杀.因此，我编写了一些代码来解决这些问题，方法是循环遍历元素，然后直接提取非文本节点:
Seems jQuery kind of chokes on those "TextNode" elements, that, curiously, it created itself (instead of html, body). So I wrote some code to get around this by looping through the elements, and extracting the non-text nodes directly:
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上.
Worked great! On Chrome.
在Firefox中对其进行了尝试，并且不再起作用.
Tried it in Firefox, and nothing works again.
结果表明，并不是Firefox中的每个对象都具有hasOwnProperty功能.什么??好的.因此，重写为:
Turns out that not every object in Firefox has a hasOwnProperty function. WHAT?? Ok. So rewrite to this:
typeof($tempHtml[i].tagName) !== 'undefined'
最后，也可以在Firefox中使用.
Finally, works in Firefox too.
哇.我只是愚蠢吗?为什么仅仅需要将HTML字符串转换为jQuery对象就需要大量的后期处理?我觉得我一定缺少明显的东西.有没有一种方法可以解决这种混乱问题?
Wow. Am I just being stupid? Why is so much post processing needed just to turn a string of HTML into a jQuery object? I feel like I must be missing something obvious. Is there a way to do this that does not involve such mayhem?
我要做的就是加载一些HTML并将其变成jQuery对象.然而，这似乎是一种越来越令人困惑的折磨.我是从根本上做错了吗?为什么这么复杂?
All I am trying to do is load up some HTML and turn it into a jQuery object. Yet it seems to be an increasingly baffling ordeal. Am I just doing something fundamentally wrong? Why is this so complicated?
推荐答案
阅读 jQuery文档-解决了此问题问题.
Read the jQuery documentation - it addresses this issue.
当您的HTML字符串包含<html>，<head>或<body>元素时，您可以执行以下操作:
When you have a HTML string that contains <html>, <head>, or <body> elements, and you do this:
$(str)
然后将忽略这些元素.只有可以放入DIV中的元素才有效，并且将被添加到生成的jQuery实例对象中.
then those elements will be ignored. Only elements that can be put inside a DIV are valid and will be added to the resulting jQuery instance object.
$div = $data.find('div');
这将导致一个空的jQuery对象，因为find()搜索当前元素集的后代(在您的情况下，这是一个TITLE元素和一个DIV元素-并且这两个元素没有后代DIV元素)
This will result in an empty jQuery object because find() searches the descendants of the current set of elements (which is one TITLE element and one DIV element in your case - and those two elements don't have descendant DIV elements).
为了从jQuery对象中删除文本节点"对象，我建议采用这种方法:
In order to remove the Text Node objects from your jQuery object, I recommend this approach:
$data.filter(function() { return this.nodeType === 1; });
要获取DIV元素，我建议采用这种方法:
To get the DIV element, I recommend this approach:
$('<div>').html(str).find('div');
其中str是您的HTML字符串.
where str is your HTML string.
替代方法:
$(str).filter('div');
这篇关于jQuery解析原始HTML，并在Firefox上具有hasOwnProperty的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
