使用for循环遍历xml
问题描述:
我正在尝试使用for循环遍历XML文档并将数据放入网页中。我想要这个代码要做的就是取出XML中的前4项,并显示它们的标题,日期,时间和描述。我目前的代码看起来像这样。使用for循环遍历xml
<script type="text/javascript">
xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","events.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var i = 0;
for(i = 0; i <4; i++){
document.write("<div style=\"display:block;padding-left:5px;\">");
document.write("<br/>");
document.write("<strong>What:</strong> <span id=\"title\"> </span>");
document.write("<br/>");
document.write("<strong>When:</strong> <span id=\"date\"></span> @ <span id=\"time\"></span>");
document.write("<br/>");
document.write("<strong>Description:</strong> <span id=\"descr\"></span><br/></div>");
document.getElementById("title").innerHTML = xmlDoc.getElementsByTagName("title")[i].childNodes[0].nodeValue;
document.getElementById("date").innerHTML = xmlDoc.getElementsByTagName("date")[i].childNodes[0].nodeValue;
document.getElementById("time").innerHTML =xmlDoc.getElementsByTagName("time")[i].childNodes[0].nodeValue;
document.getElementById("descr").innerHTML =xmlDoc.getElementsByTagName("descr")[i].childNodes[0].nodeValue;}
</script>
而不正确的输出看起来像这样。
What: Relay for Life Bingo When: N/A @ N/A Description: N/A What: When: @ Description: What: When: @ Description: What: When: @ Description:
的第一项是不正确的,因为它是在XML文件中的第四个元素,你可以看到其余全是空白。我是XML新手,所以这可能是一些初学者的错误,但我会很感激有关如何使其发挥作用的一些反馈。
events.xml
<event>
<title>Relay for Life Wristband Sale</title>
<date>March 26 & 28 </date>
<time>11 A.M - 3 P.M.</time>
<descr>N/A</descr>
</event>
<event>
<title>SHPE/SWE/EC/IEEE Dodgeball Event</title>
<date>April 1 </date>
<time>N/A</time>
<descr>N/A</descr>
</event>
<event>
<title>CH2MHILL Social/GBM</title>
<date>April 2</date>
<time>N/A</time>
<descr>N/A</descr>
</event>
<event>
<title>Relay for Life Bingo</title>
<date>N/A</date>
<time>N/A</time>
<descr>N/A</descr>
</event>
<event>
<title></title>
<date></date>
<time></time>
<descr></descr>
</event>
<event>
<title></title>
<date></date>
<time></time>
<descr></descr>
</event>
<event>
<title></title>
<date></date>
<time></time>
<descr></descr>
</event>
答
我相信这应该是你的父节点事件events.xml。
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<events>
<event>
<title>Relay for Life Wristband Sale</title>
<date>March 26 & 28 </date>
<time>11 A.M - 3 P.M.</time>
<descr>N/A</descr>
</event>
<event>
<title>SHPE/SWE/EC/IEEE Dodgeball Event</title>
<date>April 1 </date>
<time>N/A</time>
<descr>N/A</descr>
</event>
<event>
<title>CH2MHILL Social/GBM</title>
<date>April 2</date>
<time>N/A</time>
<descr>N/A</descr>
</event>
<event>
<title>Relay for Life Bingo</title>
<date>N/A</date>
<time>N/A</time>
<descr>N/A</descr>
</event>
<event>
<title></title>
<date></date>
<time></time>
<descr></descr>
</event>
<event>
<title></title>
<date></date>
<time></time>
<descr></descr>
</event>
<event>
<title></title>
<date></date>
<time></time>
<descr></descr>
</event>
</events>
Use Jquery, see the below code with your XML. It will easy for you.
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<script>
$.get('events.xml', function(d){
$(d).find('event').each(function(){
var $entry = $(this);
var title = $entry.find('title').text();
alert(title);
})
});
</script>
</body>
</html>
+0
我确实有原始xml中的父节点,它只是没有正确复制。 – 2012-03-20 22:29:14
+0
你是否仍然使用jquery获得上述代码的问题? – 2012-03-21 06:26:58
也请添加events.xml在这个问题 – 2012-03-20 03:50:38
问题是每个标签的'id',在你的代码替换的第一组值,而每一次迭代循环。你选择id为'title'' date'的元素,因此它们在所有元素中都是相同的,它们必须是唯一的。 – iDroid 2012-03-20 04:50:12