0

I want to convert nested xml to nested ul li structure. I have written all the code but there is a error in it. I have spent whole day but can't getting it to work. The error can be very simple. Can anyone please look into that and reply to me.

<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>​

Fiddle is here

I have created xml inside html because I do not know how to refer external xml into fiddle. But it behaves exactly like xml when passed to the function so no issues about that.

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

あなたの問題を解決する次のフィドルを見てください-http://jsfiddle.net/b2eMe/36/

コード

<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 に答える