时间戳

首页 > 解决方案 > 如何重复xml元素？

javascript - 如何重复xml元素？

问题描述

我已经创建了从 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？

标签： javascriptjqueryhtmlxml

解决方案

我在您的代码中看到您正在使用锚标记，它始终指向#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);

    });


}

推荐阅读