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

Question

我有这个 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

拜托，我需要帮助...

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/