중첩 된 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>

바이올린 내가 바이올린에 외부 XML을 참조하는 방법을 모르기 때문에 내가 HTML 내에서 XML을 생성 한 here

입니다. 하지만 함수에 전달 될 때 XML과 똑같이 동작하므로 문제는 없습니다.

출처

2012-07-10 Ashwin

하나의 작은 오류 네가 포장하고 있다는거야. jquery 객체가 불필요하게 다른 jquery 객체 내에있다. 여기 제안 된 변경 사항이 있습니다 : http://jsfiddle.net/b2eMe/31/. 기본적으로''root ''를'createNestedTree'에 전달하거나 함수 내에서'obj'를 직접 사용하십시오. 내 링크에서 jquery 객체임을 나타 내기 위해 $ obj로 변경했지만 그건 개인적인 취향이다. – Radu

또한 예상 결과 샘플을 게시 할 수 있습니까? – Radu

시도 :

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

문제 해결 다음과 바이올린을 살펴 보시기 바랍니다 - 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 귀하의 솔루션이 작동합니다. 하지만 @ Yoshi의 경우와 같이 최종 HTML을 반환하는 함수가 필요하므로 그의 대답을 수락합니다. – Ashwin

중첩 된 xml을 중첩 된 html로 재귀 적으로 변환

답변

관련 문제