使用javascript顯示xml數據

我有一個簡單的xml列表，我想使用javascript解析，但它不是按照我希望的方式創建列表。使用javascript顯示xml數據

<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; 
}

來源

2012-02-26 Anks

我想你'BuildStudentHTML（）'函數是連續這樣既'

''s的融合越來越調用兩次。試着把它放在函數的最後，看看會發生什麼：'output + ='

';'。這在每個「

」的末尾基本上增加了一個「

」。這可能會或可能無法解決您的問題。讓我知道事情的後續。 – rcplusplus 2012-02-26 22:39:51

這是jquery，而不是javascript – 2012-02-26 22:42:55

@rcplusplus不幸解決不了我的問題。 – Anks 2012-02-26 22:49:58

您需要遍歷每個月，並在該循環內循環「巡視」。你也應該在循環內部使用「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; 
}

來源

2012-02-27 02:40:13 charlietfl

使用javascript顯示xml數據

回答

相關問題