使用 javascript 显示 xml 数据答案

【问题标题】：display xml data using javascript使用 javascript 显示 xml 数据
【发布时间】：2012-02-26 22:33:47
【问题描述】：

我有一个简单的 xml 列表，我想使用 javascript 进行解析，但它并没有按照我想要的方式创建列表。

<TOURS>
<MONTH>
    <TOUR>
        <NUMBER>1</NUMBER>
        <VENUE>City Name - Venue Name</VENUE>
        <OTHER>Other stuff here</OTHER>
    </TOUR>
    <TOUR>
        <NUMBER>2</NUMBER>
        <VENUE>City Name - Venue Name</VENUE>
        <OTHER>Other stuff here</OTHER>
    </TOUR>
    <TOUR>
        <NUMBER>3</NUMBER>
        <VENUE>City Name - Venue Name</VENUE>
        <OTHER>Other stuff here</OTHER>
    </TOUR>
</MONTH>

<MONTH>
    <TOUR>
        <NUMBER>1</NUMBER>
        <VENUE>City Name - Venue Name</VENUE>
        <OTHER>Other stuff here</OTHER>
    </TOUR>
    <TOUR>
        <NUMBER>2</NUMBER>
        <VENUE>City Name - Venue Name</VENUE>
        <OTHER>Other stuff here</OTHER>
    </TOUR>
    <TOUR>
        <NUMBER>3</NUMBER>
        <VENUE>City Name - Venue Name</VENUE>
        <OTHER>Other stuff here</OTHER>
    </TOUR>
</MONTH>

我想根据不同的月份将它们显示在两个单独的列表中，但是使用下面的代码会发生这种情况，它会创建一个大的旅行列表，而不是基于月份的两个单独的列表。

// Start function when DOM has completely loaded 
$(document).ready(function(){ 

// Open the students.xml file
$.get("xml/tourinfo.xml",{},function(xml){

    // Build an HTML string
    myHTMLOutput = '';
    myHTMLOutput += '<div id="tours-container">';
    myHTMLOutput += '<img src="img/sep.png" style="vertical-align: middle;"></img>';

    // Run the function for each student tag in the XML file
    $('TOUR',xml).each(function(i) {
        //tourMonth = $(this).find("TOUR MONTH").text();
        tourNumber = $(this).find("NUMBER").text();
        tourVenue = $(this).find("VENUE").text();
        tourOther = $(this).find("OTHER").text();

        // Build row HTML data and store in string
        mydata = BuildStudentHTML(tourNumber,tourVenue,tourOther);
        myHTMLOutput = myHTMLOutput + mydata;

    });
    myHTMLOutput += '</div>';

    // Update the DIV called Content Area with the HTML string
    $("#tourData").append(myHTMLOutput);
});
});


 function BuildStudentHTML(tourNumber,tourVenue,tourOther){

// Build HTML string and return
output = '';
output += '<ul id="tour-info-container">';
output += '<li id="tourNumber">'+ tourNumber + '</li>';
output += '<img src="img/sep.png" style="vertical-align: middle;"></img>';
output += '<li id="tourVenue">'+ tourVenue +'</li>';
output += '<img src="img/sep.png" style="vertical-align: middle;"></img>';
output += '<li id="tourOther">'+ tourOther +'</li>';
output += '</ul>';
return output;
}

【问题讨论】：

我认为您的 BuildStudentHTML() 函数连续调用了两次，因此两个 <ul></ul> 正在合并。尝试将其放在函数的末尾，看看会发生什么：output += '<hr />';。这基本上在每个<ul></ul> 的末尾添加了一个<hr />。这可能会也可能不会解决您的问题。告诉我进展如何。
这是 jquery，不是 javascript
@rcplusplus 不幸的是并没有解决我的问题。
查看此链接，它使用普通的 ol' javascript。首先，它使用 AJAX 获取 XML 数据，对其进行解析，然后将其打印为 HTML。这是链接：XML to HTML。注意：他们使用<table></table> 而不是<ul></ul>，但我认为您只需进行一些修改即可满足您的需求。
@Dr.Dredel：jQuery 不是一种语言。

标签： javascript jquery html css xml

【解决方案1】：

您需要每个月循环，并在该循环中循环“游览”。您还应该对循环内的变量使用“var”，否则您会遇到问题目前，您正在为每个“TOUR”添加一个“ul”，并且您还重复了不允许的 ID。将您的 ID 更改为 class，因为 ID 在页面中必须是唯一的。

这应该更接近您想要的：

// Start function when DOM has completely loaded
$(document).ready(function() {

    // Open the students.xml file
    $.get("xml/tourinfo.xml", {}, function(xml) {

        // Build an HTML string
        var myHTMLOutput = '';
        myHTMLOutput += '<div id="tours-container">';
        myHTMLOutput += '<img src="img/sep.png" style="vertical-align: middle;"></img>';

        $('MONTH', xml).each(function(mIdx) {
            myHTMLOutput += '<ul class="tour-info-container">';
            // Run the function for each student tag in the XML file
            $('TOUR', xml).each(function(i) {
                //tourMonth = $(this).find("TOUR MONTH").text();
                var tourNumber = $(this).find("NUMBER").text();
                var tourVenue = $(this).find("VENUE").text();
                var tourOther = $(this).find("OTHER").text();

                // Build row HTML data and store in string
                var mydata = BuildStudentHTML(tourNumber, tourVenue, tourOther);
                myHTMLOutput += myHTMLOutput + mydata;
            });
            myHTMLOutput += '</ul>';
        });
        myHTMLOutput += '</div>';
        $("#tourData").append(myHTMLOutput);
    });
});


function BuildStudentHTML(tourNumber, tourVenue, tourOther) {

    // Build HTML string and return
    output = '';
    output += '<li class="tourNumber">' + tourNumber + '</li>';
    output += '<img src="img/sep.png" style="vertical-align: middle;"></img>';
    output += '<li class="tourVenue">' + tourVenue + '</li>';
    output += '<img src="img/sep.png" style="vertical-align: middle;"></img>';
    output += '<li class="tourOther">' + tourOther + '</li>';
    return output;
}

【讨论】：