부모의 자식 노드를 얻고 나는이 XML 문서가 JQuery와 아약스

Question

으로 처리하는 방법 :

<?xml version="1.0" encoding="utf-8" ?> 
<modules> 
    <sect> 
     <mod name="Weather"> 
      <minWidth>200</minWidth> 
      <minHeight>200</minHeight> 
     </mod> 
     <mod name="Settings"> 
      <minWidth>200</minWidth> 
      <minHeight>30</minHeight> 
     </mod> 
    </sect> 
    <sect> 
     <mod name="Social"> 
      <minWidth>200</minWidth> 
      <minHeight>200</minHeight> 
     </mod> 
    </sect> 
    <sect> 
     <mod name="Show"> 
      <minWidth>200</minWidth> 
      <minHeight>200</minHeight> 
     </mod> 
     <mod name="Puzzle"> 
      <minWidth>200</minWidth> 
      <minHeight>200</minHeight> 
     </mod> 
    </sect> 
</modules> 

을하고 나는 그것이 JQuery와 아약스와 목록 요소로 자식 노드의와 모든 종파 노드를 표시합니다. 나는 다음과 같은 JS 코드를 시도 :

$.ajax({ 
     type: "GET", 
     url: "/style/modules/start_page_modules.xml", 
     dataType: "xml", 
     success: function(xml){ 
     $(xml).find('sect').each(function(){ 
      $("<div></div>").html(function(){ 
      $(this).find("mod").each(function(){ 
       var mWidth = $(this).children("mod").find("minWidth").text(); 
       var mHeight = $(this).children("mod").find("minHeight").text(); 
       $("<li></li>").css({ 
        width: mWidth, 
        height: mHeight 
       }).appendTo("sect"); 
      }); 
      }).appendTo("#main_content ul"); 
     }); 
     }, 
     error: function() { 
     alert("An error occurred while processing XML file."); 
     } 
     }); 

을하고 일의 전부는 ul 요소와 다른 아무것도 세 sect 노드를 추가하는 것입니다. 나는 mod 노드과 같이 각각의 div가 될하려는 :

<div id="sect"> 
    <li style="width: 200px;height:200px;"></li> 
    <li style="width: 200px;height:30px;"></li> 
</div> 
<div id="sect"> 
    <li style="width: 200px;height:200px;"></li> 
</div> .....and so on 

내가 도움이 필요하세요 ...

Answer 1

1. ID가 고유 해야하는 대신 클래스를 사용해야합니다.
2. each은 현재 콜백에서 생성 된 요소가 아니라 현재 세트를 반환합니다.

3. li 요소를 유효하지 않은 태그 인 목록이 아닌 요소에 추가하려고합니다.

   $(xml).find('sect').each(function (i, sect) { 
       $("<ul class='sect'></ul>").html(function() { 
        // `this` here refers to the `ul`^
        return $(sect).find("mod").map(function() { 
         var $mod = $(this); 
         var mWidth = $mod.find("minWidth").text(); 
         var mHeight = $mod.find("minHeight").text(); 
         return $("<li></li>").css({ 
          width: mWidth, 
          height: mHeight 
         }); // .text(this.getAttribute('name')); 
        }).get(); 
       }).appendTo("#target"); 
   }); 
   

위의 조각은이 구조 생성

<ul class="sect"> 
    <li style="width: 200px; height: 200px;"></li> 
    <li style="width: 200px; height: 30px;"></li> 
</ul> 
... 

http://jsfiddle.net/82ggy/