Question

我想将嵌套的xml转换为嵌套的ul li结构。我已经编写了所有代码，但是有一个错误。我花了一整天但却无法上班。错误可以非常简单。任何人都可以查看并回复我。

<html>
<head>
    <script type="text/javascript">
        var str = ""; var temp = "";
        function makeTree() {
            treeUL = createNestedTree($('root'));
            $("#tree").append(treeUL);
        }

        function createNestedTree(obj) {
            if($(obj).children().size() != 0) {
                str = str + "<li>" + $(obj).attr("name") + "</li><ul>";
                $(obj).children("item").each(function() {
                    returnValue = createNestedTree($(this));
                    str = str + returnValue;
                });

                return str + "</ul>";
            }
            else {
                temp = "<li>" + $(obj).attr("name") + "</li><ul></ul>";
                return temp;
            }
        }
    </script>
</head>

<body>
    <!-- xml structure start -->
    <root>
        <item name="a">
            <item name="d">
                <item name="d"></item>
                <item name="e"></item>     
                <item name="f"></item>
            </item>
            <item name="g"></item>
            <item name="h"></item>
        </item>
        <item name="b"></item>
        <item name="c"></item>
    </root>
    <!-- xml structure end -->

    <a href="javascript:makeTree()">Make Tree</a>
    <div id="tree"></div>
</body>
</html>

小提琴是here

我在html中创建了xml因为我不知道如何将外部xml引用到小提琴中。但是当它传递给函数时，它的行为与xml完全相同，所以没有问题。

Answer 1

尝试：

var makeTree = function makeTree(nodes) {
  var $result = $('<ul>');

  $.each(nodes, function (_, node) {
    var
      $li = $('<li>').text(node.getAttribute('name')).appendTo($result),
      $children = $(node).children('item');

    if ($children.length > 0) {
      makeTree($children).appendTo($li);
    }
  });

  return $result;
};

makeTree($('root').children('item')).appendTo('#tree');

演示：http://jsfiddle.net/8zeep/2/

Answer 2

请查看解决您问题的以下小提琴 - http://jsfiddle.net/b2eMe/36/

<强> CODE

<html>
<head>
    <script type="text/javascript">
        var str = ""; var temp = "";
        function makeTree() {
            createNestedTree($('root'));
            $("#tree").append(str);
        }

        function createNestedTree(obj) {
            str += '<ul>'; 
            var children = obj.children();        
            if(children.size() != 0) {
                $.each(children, function (index, value) {
                    var $value = $(value);
                    str += '<li>' + $value.attr('name');
                    createNestedTree($value);
                    str += '</li>';
                })
            }
            str += '</ul>';     
        }
    </script>
</head>

<body>
    <!-- xml structure start -->
    <root>
        <item name="a">
            <item name="d">
                <item name="d"></item>
                <item name="e"></item>     
                <item name="f"></item>
            </item>
            <item name="g"></item>
            <item name="h"></item>
        </item>
        <item name="b"></item>
        <item name="c"></item>
    </root>
    <!-- xml structure end -->

    <a href="javascript:makeTree()">Make Tree</a>
    <div id="tree"></div>
</body>
</html>

递归地将嵌套的xml转换为嵌套的html

2 个答案: