從列表項調用數據

Question

這是我第一次寫這裏。 我有一個基本的水平在javascript.any幫助將不勝感激！

the html code 

<li> 
<b>stathmoi: </b><span id="Title"></span><br/> 
<b>thermokrasia: </b><span id="Temp"></span><br/> 
<b>Elevation: </b><span id="Elevation"></span><br/> 
</li><hr/> 
<li> 
<b>stathmoi: </b><span id="Title"></span><br/> 
<b>thermokrasia: </b><span id="Temp"></span><br/> 
<b>Elevation: </b><span id="Elevation"></span><br/> 
</li><hr/> 
<li> 
<b>stathmoi: </b><span id="Title"></span><br/> 
<b>thermokrasia: </b><span id="Temp"></span><br/> 
<b>Elevation: </b><span id="Elevation"></span><br/> 
</li><hr/> 
<li> 
<b>stathmoi: </b><span id="Title"></span><br/> 
<b>thermokrasia: </b><span id="Temp"></span><br/> 
<b>Elevation: </b><span id="Elevation"></span><br/> 
</li><hr/> 

the js code 


    if (window.XMLHttpRequest) 
     {// code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp=new XMLHttpRequest(); 
     } 
    else 
     {// code for IE6, IE5 
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
    xmlhttp.open("GET","domparser.xml",false); 
    xmlhttp.send(); 
    xmlDoc=xmlhttp.responseXML; 

    //document.getElementsByTagName('li'); 
    document.getElementById("Title").innerHTML= 
    xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue; 
    document.getElementById("Temp").innerHTML= 
    xmlDoc.getElementsByTagName("temp")[0].childNodes[0].nodeValue; 
    document.getElementById("Elevation").innerHTML= 
    xmlDoc.getElementsByTagName("elevation")[0].childNodes[0].nodeValue; 
    //document.getElementById("Title").innerHTML= 
    xmlDoc.getElementsByTagName("title")[1].childNodes[0].nodeValue; 
    //document.getElementById("Temp").innerHTML= 
    xmlDoc.getElementsByTagName("temp")[1].childNodes[0].nodeValue; 
    //document.getElementById("Elevation").innerHTML= 
    xmlDoc.getElementsByTagName("elevation")[1].childNodes[0].nodeValue; 

下面是XML代碼 - domparser.xml

<channel>  
<item>  
<title>kalimnos</title>  
<temp>50</temp>  
<elevation>650m</elevation>  
</item>  
<item>  
<title>kerkira</title>  
<temp>30</temp>  
<elevation>1650m</elevation>  
</item>  
<item>  
<title>iraklio</title>  
<temp>50</temp>  
<elevation>50m</elevation>  
</item>  
<item>  
<title>xania</title>  
<temp>30</temp>  
<elevation>150m</elevation>  
</item>  
</channel> 

當HTML文件運行只顯示的XML文件的第一個 「項目」 的數據

。
我想顯示所有列表項與每次xml的不同「項目」。

例如在第一列表項：
stathmoi：kalimnos
thermokrasia：50
海拔：650米

例如在第二列表項：
stathmoi：kerkira
thermokrasia：30
海拔：1650米

etc

Answer 1

跨度使用不同的ID。

<li> 
<b>stathmoi: </b><span id="Title"></span><br/> 
<b>thermokrasia: </b><span id="Temp"></span><br/> 
<b>Elevation: </b><span id="Elevation"></span><br/> 
</li><hr/> 
<li> 
<b>stathmoi: </b><span id="Title1"></span><br/> 
<b>thermokrasia: </b><span id="Temp1"></span><br/> 
<b>Elevation: </b><span id="Elevation1"></span><br/> 
</li><hr/> 

Answer 2

從'老派'javascript方法，你可以做到以下幾點。

一旦你獲得了數據，你可以循環，創建你的結構。這意味着該結構將與您收到的數據一樣大或小。

在頭

window.onload = function() { 
    var ul = document.getElementById("my-listview"); 

    // replace 'i<10' with 'i<xmlDoc.getElementsByTagName("title").length' 
    for (var i=0; i<10; i++) { 
    var li = document.createElement("li"); 
    // Left 1 
    var divLeft1 = document.createElement("div"); 
    divLeft1.className = "Left1"; 
    li.appendChild(divLeft1); 
    var div2 = document.createElement("div"); 
    div2.id = "Title"+i 
    div2.innerHTML = div2.id; //xmlDoc.getElementsByTagName("title")[i].childNodes[0].nodeValue; 
    divLeft1.appendChild(div2); 

    // Left 2 
    var divLeft2 = document.createElement("div"); 
    divLeft2.className = "Left2"; 
    li.appendChild(divLeft2); 
    var div3 = document.createElement("div"); 
    div3.id = "Temp"+i 
    div3.innerHTML = div3.id; //xmlDoc.getElementsByTagName("temp")[i].childNodes[0].nodeValue; 
    divLeft2.appendChild(div3); 
    var div4 = document.createElement("div"); 
    div4.id = "Elevation"+i 
    div4.innerHTML = div4.id; //xmlDoc.getElementsByTagName("elevation")[i].childNodes[0].nodeValue; 
    divLeft2.appendChild(div4); 

    // Right1 
    var divRight1 = document.createElement("div"); 
    divRight1.className = "Right1"; 
    li.appendChild(divRight1); 
    var div5 = document.createElement("div"); 
    div5.id = "Beaufort"+i 
    div5.innerHTML = div5.id; //xmlDoc.getElementsByTagName("beaufort")[i].childNodes[0].nodeValue; 
    divRight1.appendChild(div5); 

    ul.appendChild(li); 
    } 
}; 

當頁面加載完成，這將插入結構到您的「UL」：

您可以在W3School找到更多關於「的createElement」，但任何標準標籤都可以這樣創建。 http://www.w3schools.com/jsref/met_document_createelement.asp