jQuery解析原始HTML，并在Firefox上具有hasOwnProperty

如何解决jQuery解析原始HTML，并在Firefox上具有hasOwnProperty

|| 我使用$.get或$.ajax加载了一些HTML。在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，则将选择该div。但是...什么？ jQuery对这些\“ TextNode \”元素似乎有点cho，奇怪的是，它创建了自己（而不是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对象中删除“文本节点”对象，我建议采用以下方法：

$data.filter(function() { return this.nodeType === 1; });

为了获得DIV元素，我建议采用以下方法：

$(\'<div>\').html(str).find(\'div\');

其中str是您的HTML字符串。替代方法：

$(str).filter(\'div\');

,一个有效的解决方案：http://jsfiddle.net/peeter/FuNhF/ 至于为什么它不起作用：http://bugs.jquery.com/ticket/6380 至于为什么找不到子元素div的原因是因为剥离了html和body标签后，您最终得到了title和div，这是两个不同的未嵌套元素。

    var data = $(\'<title></title><div id=\"topdiv\" style=\"display:none;width:880px; height:600px;\"></div>\');
    console.log(data[0]); //Title
    console.log(data[1]); //Div

相对于：

var data = $(\'<div><div id=\"topdiv\" style=\"display:none;width:880px; height:600px;\"></div></div>\');

console.log(data);

控制台输出是其中嵌套有topdiv的主div。您还应该确保传入的HTML是有效的，否则将得到“意外”结果，例如：http://jsfiddle.net/peeter/6wKk3/ ,快速补充@Sime \的出色答案。如果不链接命令，则需要将$ data设置为过滤器的结果。过滤器功能不适用于原始集合。

$data = $data.filter(function() { return this.nodeType === 1; });
// do other stuff with your properly filtered $data collection