我試圖導入XML的HTML文件使用jQuery 阿賈克斯內數據爲<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？
如果我用追加來編寫循環輸出，我應該把它追加到什麼元素？

任何想法我該怎麼做？

在此先感謝！

來源

2015-07-13 Homer

我添加爲評論，因爲它不是一個回答你的問題，而是兩個不同的方案：1）XSLT，它直接將XML轉換爲HTML：http://www.w3schools.com/xsl/xsl_client.asp 2）將XML解析爲JS對象，或者比這更好，從服務器返回JSON，這很容易解析爲JavaScript對象，並使用像handlebars.js一些模板庫：http://handlebarsjs.com/我不知道哪個你必須實現這種選擇的可能性，但兩者都非常有用。學習第二個選項要容易得多。 – JotaBe

非常感謝這些筆記/建議@JotaBe！將檢查他們。高度讚賞評論肯定！ – Homer

你的循環邏輯很好。你只需要追加到第二個循環中的字符串，而不是一個長連接。試試這個：

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

來源

2015-07-13 07:51:23

非常感謝！ :) – Homer

沒問題，很高興幫助 –

試試這個： -

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

來源

2015-07-13 07:58:22

非常感謝您的幫助！ :) – Homer

環路內（追加另一個循環的）

這是我jQuery的嘗試：

回答

相關問題