1

我正在尝试使用 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>

我对这段代码感到头疼。你们能帮我解决可能出现的问题吗！

谢谢

4

4 回答 4

1

我的建议是递归地使用 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()返回一个数组，因此结果字符串作为数组的第一项存在。

于 2012-10-03T14:58:31.120 回答
1

这是将我的评论合并为一个连贯的答案-->

  1. 退出$("#ListContainer").append($ul);递归；
  2. 创建<UL>外部xmlParser()方法并将其作为 parentElem 传递。例如var $ul = xmlParser(xml, $('<ul>')); $("#ListContainer").append($ul)（在 $.ajax 的成功回调中）
  3. 作为函数$ul的输出结果返回xmlParser()
于 2012-10-04T07:26:07.297 回答
1

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

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

代替

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

最后一个api参考下面的链接：

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

于 2012-10-03T08:52:30.753 回答
0

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

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

代替

$ul.append(xmlParser($(el)));
于 2013-02-23T10:34:51.453 回答