如何重复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);

    });


}