javascript - 使用javascript显示xml数据

Question

我有一个简单的 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;
}

Answer 1

您需要遍历每个月，并在该循环中遍历“tour”。您还应该在循环内为变量使用“var”，否则您会遇到问题 目前，您正在为每个“TOUR”添加一个“ul”，并且您还在重复不允许的 ID。将您的 ID 更改为类，因为 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;
}