[英]What am I missing in my code? Javascript and XML
我是XML,html和javascript的初學者。 我編寫了一些代碼來捕獲和連接html中的所有title元素,但是我無法以所需的方式顯示輸出。 有人可以看一下我的代碼,並給我一些有關如何修復我的代碼的提示嗎? 預先感謝您的幫助。
當前:結果:我要訪問的城市日本東京聖托里尼希臘美國芝加哥
我想要看起來像這樣的東西:
這是XML文件:
<?xml version="1.0"?>
<rss version="0.92">
<channel>
<title>Cities I Want to Visit</title>
<link>http://pinterest.com/manicmonster/cities-i-want-to-visit</link>
<Description>I love traveling!</Description>
<item>
<title>Tokyo, Japan</title>
<link>http://www.gotokyo.org/en</link>
</item>
<item>
<title>Santorini, Greece</title>
<link>http://www.visitgreece.gr/en/greek_islands/santorini</link>
</item>
<item>
<title>Chicago, USA</title>
<link>http://www.cityofchicago.org/city/en.html</link>
</item>
<item>
<title>Rome, Italy</title>
<link>http://www.turismoroma.it/?lang=en</link>
</item>
</channel>
</rss>
這是html文件:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<title>Practice</title>
<meta charset="UTF-8">
</head>
<body>
<div id="clickme" onclick="startAjax()">Click me</div>
<script>
function startAjax(){
$("#clickme").text("Calling server");
$.ajax({url:"test.xml",
success:callbackFunction, error:errorFunction});
}
function callbackFunction(data,info){
var titles = $(data).find("title:first");
var items = $(data).find("item title");
if (titles && titles.length)
$("#clickme").text("result: " + titles.text() + " " + items.text());
else
errorFunction(data, "No titles");
}
function errorFunction(data,info){
$("#clickme").text("error occurred:"+info);
}
</script>
</body>
</html>
function callbackFunction(data,info){
var titles = $(data).find("title:first"),
items = $(data).find("item").reverse(),
items_idx = items.length,
html= "";
while (items_idx--){
var txt = items[items_idx].find("title").text(),
url = items[items_idx].find("link").text();
html += "<li><a href='" + url + "'>" + txt + "</a></li>";
}
if (titles && titles.length)
$("#clickme").text("result: " + titles.text() + " <ul>" + html + "</ul>");
else
errorFunction(data, "No titles");
}
var items = $(data).find("item title");
此行獲取xml節點的集合。 稍后,當您的代碼執行此行時:
items.text()
它接受集合並返回用逗號分隔的值字符串。 (例如日本東京,聖托里尼島,希臘芝加哥,美國羅馬,意大利)
正如Malk所暗示的,您需要使用循環來獲取每個單獨的值並將其添加到列表中。 您可以使用該示例,也可以使用jQuery集合中的each
方法
html = "";
items.each(function(index, value) {
html += "<li>" + value + "</li>";
});
當然,假設您需要一個項目符號列表。 但是這個想法是正確的,即遍歷整個集合似乎更接近於您想要的。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.