jQuery parseHTML结果不如预期

时间:2014-08-28 19:59:35

标签: javascript jquery html

我在远程文件的字符串中包含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>

有人可以向我解释为什么我不能选择一个项目吗?

1 个答案:

答案 0 :(得分:2)

$.parseHTML解析headbody代码,因为当您将某些内容插入已有head和{{1}的DOM时,通常不需要这些代码}标签,所以你最终得到一个类似

的数组
body

包含元标记和两个div。

由于div现在是根元素,它们不是任何东西的子元素,因此使用jQuery的[meta, div#test1.test1, div#test2.test2] 将不起作用,因为它只能找到后代元素。

然而,使用find()将起作用

filter()

或者如果您不确定元素是根元素还是某个元素的子元素,则可以将元素数组附加到包装元素,然后使用$(html).filter('.test2').attr("name");

find()

FIDDLE