將嵌套的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

回答

相關問題