如何重復xml元素？

Question

我已經創建了從xml文件加載元素的代碼。 但是它不會在xml文件中加載重復的值。 它僅加載一個元素，其他元素則不加載。 附上一個例子。

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

function showdata(xml){
    xml = $(xml).children();

     $(xml).children().each(function () {
        let tag = $(this).prop("tagName");                   
        let to = $(this).find("to").text();
        let from =$(this).find("from").text();
        let heading = $(this).find("heading").text();
        let list = $(this).find("list").text();
        let body =$(this).find("body").text();

        let html = `<div class="col-md-4"  id="random">
                    <div class="thumbnail">
                      <a href="#${tag}"><p>${to}</p>
                      <p>${from}</p>
                      <p>${heading}</p>
                      <p>${body}</p></a>
                    </div>
                    </div>`;

        let popup = `<div id="${tag}" class="overlay">
                <div class="popup">
                    <h6>${heading}</h6>
                    <a class="close" href="#">&times;</a>
                    <ul><li>${list}</li></ul>
                </div>
            </div>`;

        $("#xmldata").append(html);
        $("#popup").append(popup);

    });
}

http://next.plnkr.co/edit/MVwJnBHypBFvg2Lk嗎？

Answer 1

我在您的代碼中看到您正在使用錨標記，並且該標記始終指向#note 。 我剛剛追加了索引號，現在它很完美。

請更改此行

$(xml).children().each(function (index,item) {
    let tag = $(this).prop("tagName")+index; 

我還更新了未綁定為li的列表。 現在檢查它是否適合您

完整的代碼如下

function showdata(xml){
    xml = $(xml).children();

     $(xml).children().each(function (index,item) {
        let tag = $(this).prop("tagName")+index;                   
        let to = $(this).find("to").text();
        let from =$(this).find("from").text();
        let heading = $(this).find("heading").text();
        let list = $(this).find("list");
        let body =$(this).find("body").text();

        let html = `<div class="col-md-4"  id="random">
                    <div class="thumbnail">
                      <a href="#${tag}"><p>${to}</p>
                      <p>${from}</p>
                      <p>${heading}</p>
                      <p>${body}</p></a>
                    </div>
                    </div>`;
                    var listStr="";
                    list.each((index,item)=>{
                            listStr+="<li>"+item.innerHTML+"</li>"
                        }) 

        let popup = `<div id="${tag}" class="overlay">
                <div class="popup">
                    <h6>${heading}</h6>
                    <a class="close" href="#">&times;</a>
                    <ul>`+listStr+`</ul>
                </div>
            </div>`;

        $("#xmldata").append(html);
        $("#popup").append(popup);

    });


}