0

我想将嵌套的 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>​

小提琴在这里

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

4

2 回答 2

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/

于 2012-07-10T15:39:29.940 回答
1

Please take a look at the following fiddle which solves your problem - 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>​
于 2012-07-10T15:41:59.610 回答