将嵌套的xml转换为嵌套的html

我想将嵌套的xml转换为嵌套的ul li结构。我写了所有的代码，但是它有一个错误。我花了整整一天的时间，但无法完成它的工作。错误可能非常简单。任何人都可以请看看并回复我。将嵌套的xml转换为嵌套的html

<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

我已经创建的XML在HTML里面，因为我不知道如何引用外部XML到小提琴。但是，当它传递给函数时，它的行为与xml完全相同，所以不存在任何问题。

来源

2012-07-10 Ashwin

一个小小的错误是你在包装不必要地在另一个jquery对象中使用jquery对象。这里是我建议的更改：http://jsfiddle.net/b2eMe/31/。基本上，或者将''root''传递给'createNestedTree'，或者直接在函数中使用'obj'。在我的链接中，我将它改为'$ obj'来表明它是一个jquery对象，但这只是我个人的偏好。 – Radu 2012-07-10 15:33:31

此外，您可以请您发布您的预期结果的样本吗？ – Radu 2012-07-10 15:34:28

尝试：

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-10 15:39:29 Yoshi

您的解决方案完美运行。非常感谢！！ – Ashwin 2012-07-11 05:29:57

请看看下面拨弄它解决您的问题 - 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-10 15:41:59 tjscience

+1作为您的解决方案。但是我需要一个函数来返回最终的html，例如@Yoshi，所以我接受他的回答。 – Ashwin 2012-07-11 05:29:38

将嵌套的xml转换为嵌套的html

回答

相关问题