jQuery parseHTML结果与预期不符。

Question

jQuery parseHTML结果与预期不符。

3

我有一个来自远程文件的字符串中包含HTML。现在我想用jQuery读取一些元素。字符串中的外部HTML如下：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
        <script src="jquery-1.11.1.min.js"></script>
        <script>
            $(document).ready(function() {

                var htmlString = '<!DOCTYPE html>' +
                        '<html>' +
                        '<head>' +
                        '<meta name="firstName" content="false">' +
                        '</head>' +
                        '<body>' +
                        '<div id="test1" class="test1" name="test1">test2</div>' +
                        '<div id="test2" class="test2" name="test2">test2</span>' +
                        '</body>' +
                        '</html>';

                var $ = jQuery;
                var html = $.parseHTML(htmlString);
                //var html = htmlString;

                var test1 = $("#test1", $(html)).attr("name");
                var test2 = $(html).find("div[class='test2']").attr("name");
                var test3 = $(html).attr("name");

                console.log(html);
                console.log('1: ' + test1); //undefined
                console.log('2: ' + test2); //undefined
                console.log('3: ' + test3); //firstName

            });
        </script>
    </head>
    <body>
    </body>
</html>

有人能解释一下为什么我不能选择一个项目吗？

- user3077158

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- adeneo · Accepted Answer

$.parseHTML函数会解析掉head和body标签，因为当你将内容插入到已经有head和body标签的DOM中时，一般不需要这些标签。所以最终得到的数组看起来像这样：

[meta, div#test1.test1, div#test2.test2]

包含元标记和两个div的内容。

由于这些div现在是根元素，它们不是任何东西的子元素，因此使用jQuery的find()无法工作，因为它只查找后代元素。

然而，使用filter()将起作用。

$(html).filter('.test2').attr("name");

如果你不确定元素是根元素还是某个元素的子元素，可以将元素数组附加到包装元素上，然后使用find()方法。

$('<div />', {html : html}).find('.test2').attr('name');

在线代码编辑器