Javascript 如何获取父节点的子节点并使用jQueryAjax进行处理

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

求你了，我需要帮助

ID应该是唯一的，而应该使用类

each

返回当前集合，而不是在其回调中生成的元素

您试图将

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");
});

$（xml）.find（'sect'）。每个（函数（i，sect）{
$（“
”）html（函数（）{
//‘this’在这里指的是‘ul’^
返回$（sect.find（“mod”）.map（函数（）{
var$mod=$（本）；
var mWidth=$mod.find（“minWidth”）.text（）；
var mHeight=$mod.find（“最小高度”）.text（）；
返回$（“
”）.css({
宽度：mWidth，
身高：mHight
})；//.text（此.getAttribute（'name'）；
}).get（）；
}).附于（“目标”）；
});

上述代码段生成此结构：

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

宽度：200px；高度：200px；“>
宽度：200px；高度：30px；“>

...

ID在HTML中必须是唯一的。您需要更改策略，因为我希望mod节点位于各自的sect div中

$(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>
...