javascript之如何获取父节点的子节点并使用 jquery ajax 处理它

我有这个 xml 文档:

<?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 ajax将每个sect节点及其子节点显示为列表元素。我尝试了以下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."); 
      } 
      }); 

它所做的只是将三个 sect 节点附加到 ul 元素，仅此而已。我希望 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 

拜托，我需要帮助...

请您参考如下方法:

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/