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

Converting nested xml to nested html recursively

本文关键字：嵌套 html 转换 xml 递归      更新时间：2023-09-26

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

Fiddle在这里

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

try:

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/

请看看下面的小提琴，它可以解决您的问题-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>​
相关文章：