这是我的jQuery尝试：

Question

我正在尝试使用jQuery Ajax 在 HTML 文件中将 XML 数据导入为<ul>。

我的 XML 文件结构如下：

<?xml version="1.0" encoding="UTF-8"?>
<playlist>
    <audio>
        <url></url>
        <title></title>
        <artist></artist>
        <labels>
            <label></label>
            <label></label>
            <label></label>
        </labels>
    </audio>
    <audio>
        /* another data */
    </audio>
<playlist>

我的 HTML 是：

<div id="container">
    <ul class="playlist"></ul>
</div>

这是我的jQuery尝试：

$(document).ready(function () {
    $.ajax({
    type: "GET",
    url: "playlist.xml",
    dataType: "xml",
    success: xmlParser
    });
});


function xmlParser(xml) {
    $(xml).find("audio").each(function () {
        $("ul.playlist").append(
            '<li><a href="'
            + $(this).find("url").text()
            + '"><b>'
            + $(this).find("title").text()
            + '</b> - '
            + $(this).find("artist").text();


//==============================================
            $(this).find("labels").children("label").each(function () {
                    '<span class="label">' + $(this).text() +'</span>'
            })
//==============================================


            + '</a></li>'
        );
    });
}

现在，注释行之间存在问题：

我不知道如何在这里插入另一个循环（每个循环）？

如何在append中插入append？
如果我使用追加来编写循环输出，那么我应该将它附加到哪个元素？

任何想法我该怎么做？

提前致谢！

Answer 1

你的循环逻辑很好。您只需要在第二个循环中附加到字符串，而不是一个长连接。试试这个：

$(xml).find("audio").each(function () {
    var html = '<li><a href="' + $(this).find("url").text() + '">' + 
        '<b>' + $(this).find("title").text() + '</b> - ' + $(this).find("artist").text();

    $(this).find("labels").children("label").each(function () {
        html += '<span class="label">' + $(this).text() +'</span>'
    })

    html += '</a></li>'

    $("ul.playlist").append(html);
});

Answer 2

试试这个： -

function xmlParser(xml) {
$(xml).find("audio").each(function () {
     var labels= "";
     $(this).find("labels").children("label").each(function () {             
         labels+= '<span class="label">' + $(this).text() +'</span>';             
     })
    $("ul.playlist").append(
        '<li><a href="'
        + $(this).find("url").text()
        + '"><b>'
        + $(this).find("title").text()
        + '</b> - '
        + $(this).find("artist").text()   +labels    + '</a></li>'
    );
});
}

Demo

循环里面（追加另一个循环）

这是我的jQuery尝试：

2 个答案: