Question

方案

我正在尝试使用jQuery解析XML文件以生成无序列表，但无法获得预期的输出。请指出使用jQuery解析XML的正确方法。

的jsfiddle

预期输出

<ul>
    <li>chapter 1</li>
    <li>chapter 2</li>
    <ul>
        <li>lesson 1</li>
        <li>lesson 2</li>
        <li>lesson 3</li>
    </ul>
    <li>chapter 3</li>
        <ul>
            <li>lesson 1</li>
            <ul>
                <li>page 1</li>
                <li>page 2</li>
                <li>page 3</li>
            </ul>
            <li>lesson 2</li>
        </ul>
</ul>

实际输出

<ul>
    <ul>
        <li>chapter 1</li>
    </ul>
    <ul>
        <li>chapter 2</li>
        <ul>
            <li>lesson 1</li>
        </ul>
        <ul>
            <li>lesson 2</li>
        </ul>
        <ul>
            <li>lesson 3</li>
        </ul>
    </ul>
    <ul>
        <li>chapter 3</li>
        <ul>
            <li>lesson 1</li>
            <ul>
                <li>page 1</li>
            </ul>
            <ul>
                <li>page 2</li>
            </ul>
            <ul>
                <li>page 3</li>
            </ul>
        </ul>
        <ul>
            <li>lesson 2</li>
        </ul>
    </ul>
</ul>

源文件

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous">
</script>
<script>var moduleType = "xml";</script>


</head>
<body>
<div id="menu"></div>

<script src="script.js"></script>
</body>
</html>

的Javascript

function loadXML(){
    console.log("loading XML");
     parser = new DOMParser();

    //Create a jQuery object
    var xml_text = "<?xml version='1.0' encoding='iso-8859-1'?> <course> <name>Multi Level XML &amp; JSON parsing using Javascript</name> <chapter> <id>1</id> <title>Chapter 1</title> <url>https://gist.github.com/abhi9bakshi/6e742da5735c1b734eaace452bd45db1#chapter-1</url> </chapter> <chapter> <id>2</id> <title>Chapter 2</title> <url>https://gist.github.com/abhi9bakshi/6e742da5735c1b734eaace452bd45db1#chapter-2</url> <lesson> <id>1</id> <title>Lesson 1</title> <url>https://gist.github.com/abhi9bakshi/6e742da5735c1b734eaace452bd45db1#lesson-1</url> </lesson> <lesson> <id>2</id> <title>Lesson 2</title> <url>https://gist.github.com/abhi9bakshi/6e742da5735c1b734eaace452bd45db1#lesson-2</url> </lesson> <lesson> <id>3</id> <title>Lesson 3</title> <url>https://gist.github.com/abhi9bakshi/6e742da5735c1b734eaace452bd45db1#lesson-3</url> </lesson> </chapter> <chapter> <id>3</id> <title>Chapter 3</title> <url>https://gist.github.com/abhi9bakshi/6e742da5735c1b734eaace452bd45db1#chapter-3</url> <lesson> <id>1</id> <title>Lesson 1</title> <url>https://gist.github.com/abhi9bakshi/6e742da5735c1b734eaace452bd45db1#lesson-1-1</url> <page> <id>1</id> <title>Page 1</title> <url>https://gist.github.com/abhi9bakshi/6e742da5735c1b734eaace452bd45db1#page-1</url> </page> <page> <id>2</id> <title>Page 2</title> <url>https://gist.github.com/abhi9bakshi/6e742da5735c1b734eaace452bd45db1#page-2</url> </page> <page> <id>3</id> <title>Page 3</title> <url>https://gist.github.com/abhi9bakshi/6e742da5735c1b734eaace452bd45db1#page-3</url> </page> </lesson> <lesson> <id>2</id> <url>https://gist.github.com/abhi9bakshi/6e742da5735c1b734eaace452bd45db1#lesson-2-1</url> <title>Lesson 2</title> </lesson> </chapter> </course>";
    var xml = parser.parseFromString(xml_text,"text/xml");
    var course = xml.getElementsByTagName("course");
    $xmlObject = $(xml);

    //load menu
    console.log($xmlObject.find('page').first().find('title').text());
    var $ul = loadMenu($(xml));

    //remove empty ul
    $ul.find('ul').each(function(){
        if ($(this).children().length == 0) {
             $(this).remove();
        }
    });

    //append to menu
    $("#menu").append($ul);
}

function loadMenu($xml){
    var $ul = $("<ul>"); // For each Parent, create an <ul>
    $xml.contents().each(function (index, object) {
        if (object.nodeType == 3) return true;
        if (object.nodeName.toUpperCase() == "TITLE") {
           $("<li>").text($(object).text()).appendTo($ul); // Append <li> Children
        } else {
           $ul.append(loadMenu($(object))); // Recursively append the other Parent
        }
    });
    return $ul;
}




//Load XML
loadXML();

XML

<?xml version='1.0' encoding='iso-8859-1'?>
<course>
    <name>Multi Level XML &amp; JSON parsing using Javascript</name>
    <chapter>
        <id>1</id>
        <title>Chapter 1</title>
        <url>https://gist.github.com/abhi9bakshi/6e742da5735c1b734eaace452bd45db1#chapter-1</url>
    </chapter>
    <chapter>
        <id>2</id>
        <title>Chapter 2</title>
        <url>https://gist.github.com/abhi9bakshi/6e742da5735c1b734eaace452bd45db1#chapter-2</url>
        <lesson>
            <id>1</id>
            <title>Lesson 1</title>
            <url>https://gist.github.com/abhi9bakshi/6e742da5735c1b734eaace452bd45db1#lesson-1</url>
        </lesson>
        <lesson>
            <id>2</id>
            <title>Lesson 2</title>
            <url>https://gist.github.com/abhi9bakshi/6e742da5735c1b734eaace452bd45db1#lesson-2</url>
        </lesson>
        <lesson>
            <id>3</id>
            <title>Lesson 3</title>
            <url>https://gist.github.com/abhi9bakshi/6e742da5735c1b734eaace452bd45db1#lesson-3</url>
        </lesson>
    </chapter>
    <chapter>
        <id>3</id>
        <title>Chapter 3</title>
        <url>https://gist.github.com/abhi9bakshi/6e742da5735c1b734eaace452bd45db1#chapter-3</url>
        <lesson>
            <id>1</id>
            <title>Lesson 1</title>
            <url>https://gist.github.com/abhi9bakshi/6e742da5735c1b734eaace452bd45db1#lesson-1-1</url>
            <page>
                <id>1</id>
                <title>Page 1</title>
                <url>https://gist.github.com/abhi9bakshi/6e742da5735c1b734eaace452bd45db1#page-1</url>
            </page>
            <page>
                <id>2</id>
                <title>Page 2</title>
                <url>https://gist.github.com/abhi9bakshi/6e742da5735c1b734eaace452bd45db1#page-2</url>
            </page>
            <page>
                <id>3</id>
                <title>Page 3</title>
                <url>https://gist.github.com/abhi9bakshi/6e742da5735c1b734eaace452bd45db1#page-3</url>
            </page>
        </lesson>
        <lesson>
            <id>2</id>
            <url>https://gist.github.com/abhi9bakshi/6e742da5735c1b734eaace452bd45db1#lesson-2-1</url>
            <title>Lesson 2</title>
        </lesson>
    </chapter>
</course>

Answer 1

方法$.parseXML用于将包含有效XML标记的字符串转换为标准HTML元素树。 Here is the link to the documentation on this function

在您的情况下，您可能希望将XML构造为字符串，或者通过AJAX调用将其提取，然后将该字符串传递给$.parseXML。

如何使用jQuery从XML生成无序列表

1 个答案: