Question

我正在尝试使用jquery将嵌套的xml文档转换为无序列表.xml文档是

    <?xml version="1.0" encoding="utf-8"?>
    <Parent>
    <name>Director</name>
    <Children>Exe Director1</Children>
    <Children>Exe Director2</Children>
    <Parent>
        <name>Exe Director3</name>
        <Children>Sub Director 1</Children>
        <Children>Sub Director 2</Children>
        <Parent>
            <name>Sub Director 3</name>
            <Children>Cameraman 1</Children>
            <Children>Cameraman 2</Children>
        </Parent>
    </Parent>    
</Parent>

预期产出：

 <ul>
    <li>Director
        <ul>
            <li>Exe Director 1</li>
            <li>Exe Director 2</li>
            <li>Exe Director 3
                <ul>
                    <li>Sub Director 1</li>
                    <li>Sub Director 2</li>
                    <li>Sub Director 3
                        <ul>
                            <li>Cameraman 1</li>
                            <li>Cameraman 2</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

我得到的输出。

 <ul>
        <li>Director</li>
        <ul>
            <li>Exe Director1</li>
            <li>Exe Director2</li>
            <li>Exe Director3</li>
            <ul>
                <li>Sub Director 1</li>
                <li>Sub Director 2</li>
                <li>Sub Director 3</li>
                <ul>
                    <li>Cameraman 1</li>
                    <li>Cameraman 2</li>
                </ul>
            </ul>
        </ul>
    </ul>

正如您所看到的，孩子们不会在父li内创建，而是在其外部创建最新版本的代码

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    var levels;
    $(document).ready(function() 
    {
        $.ajax({
            type: "GET",
            url: "test.xml",
            dataType: "xml",
            success: function (xml) { 
                var $ul = xmlParser(xml, $('#ListContainer'));
            }
        });
    });

    function xmlParser(xml,ul) {
        $(xml).contents().each(function (i, el) 
        {
            if (el.nodeName.toUpperCase() == "CHILDREN") 
            {
               $("<li>").text($(el).text()).appendTo($('ul:last')); // Append <li> Children
            } else if (el.nodeName.toUpperCase() == "NAME") 
            {
                $('<li>').text($(el).text()).appendTo(ul);
                $('<ul>').insertAfter($("li:last"));
            }
            else if (el.nodeName.toUpperCase() == "PARENT") 
            {
               if($('ul').length == 0)
                {
                    ul = ul.append('<ul>');
                }
                ul.append(xmlParser($(el),$("ul:last") )); // Recursively append the other Parent
            }
        });
        return ul;
    }
</script>
</head>
<body>
    <div id="ListContainer"></div>
</body>
</html>

我对这段代码感到不满。可以帮助我解决可能出错的问题！

由于

Answer 1

您将PARENT元素附加到所有“PARENT”内容的相同“ul”元素。使用

 $ul.find('li').last().append(xmlParser($(el)));

而不是

 $ul.append(xmlParser($(el)));

请参阅以下链接了解最后一个api：

http://api.jquery.com/last/

Answer 2

我的建议是递归使用jQuery的map函数，如下例所示：

<script type="text/javascript">
$(function() {
    var map = function() {
            if ($(this).is("parent")) {
                var children = $(this).children().map(map).get().join('');
                $(this).children().remove();
                var result = "<li>" + $(this).text();
                return result + "<ul>" + children + "</ul></li>";
            }

            if ($(this).is("Children")) {
                return "<li>" + $(this).text() + "</li>";
            }
        };

    $.get("test.xml", function(data) {
        var result = $(data).map(map);
        $("div").html("<ul>" + result[0] + "</ul>");
    }, "html");
}); 
</script>

这确保完全遍历输入树，并且结果输出与输入具有相同的“缩进”。

请注意map()返回一个数组，因此结果字符串作为数组的第一项出现。

Answer 3

这是将我的评论整合成一个连贯的答案 - ＆gt;

移出$("#ListContainer").append($ul);退出递归;
在<UL>方法之外创建xmlParser()并将其作为parentElem传递。例如var $ul = xmlParser(xml, $('<ul>')); $("#ListContainer").append($ul)（成功回调$ .ajax）
返回$ul作为xmlParser()功能

Answer 4

您将PARENT元素附加到所有“PARENT”内容的相同“ul”元素。使用

$ul.find('li').last().append(xmlParser($(el)));

而不是

$ul.append(xmlParser($(el)));

将嵌套的xml嵌入到jquery中的无序列表中

4 个答案: