我在代码中丢失了什么？ Javascript和XML

我是XML，html和javascript的初学者。我写了一些代码来抓取和连接html中的所有标题元素，但我无法以我想要的方式显示输出。有人可以看看我的代码，并给我一些关于如何修复我的代码的提示吗？预先感谢您的帮助。我在代码中丢失了什么？ Javascript和XML

电流：结果：城市我要访问东京，JapanSantorni，GreeceChicago，美国

我想要的东西，看起来像：

结果：
城市我想访问
日本东京
希腊圣托里尼
美国芝加哥

下面是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>

来源

2013-07-15 user2203774

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

来源

2013-07-15 22:34:43 Malk

只是我的意见在这里的编码风格 - 而不是像这样递减长度变量，我会使用传统的for循环与一个常规的索引变量。这可能工作得很好，但是您将该变量重用为索引而不是名称所暗示的内容，如果您再次需要该长度，可能会引起混淆。 –

如果你解释变化而不是分歧地做，它会有所帮助 – vtortola

var items = $(data).find("item title");

此行得到XML节点的集合。稍后当您的代码执行此行时：

items.text()

它需要收集并返回逗号分隔的字符串值。（例如东京，日本圣托里尼，希腊芝加哥，USARome，意大利）

由于Malk暗示，您需要使用循环来获取每个单独的值并将它们添加到列表中。您可以使用例如，或者使用jQuery的each方法在您的收藏

html = ""; 
items.each(function(index, value) { 
    html += "<li>" + value + "</li>"; 
});

假设，当然，你想有一个项目符号列表。但这个想法是真实的，迭代收集似乎更接近你想要的。

来源

2013-07-15 23:03:18 lemieuxster

我在代码中丢失了什么？ Javascript和XML

回答

相关问题