jquery - 内部循环(附加另一个循环)

Question

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

我的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来编写循环输出，我应该将其附加到哪个元素？

有什么想法我该怎么做吗？

提前致谢!

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