爲什麼我的AJAX .each循環一次打印所有的XML數據？

Question

我是Web編程新手，到目前爲止我非常享受它。那麼，直到現在。我試圖使用JQuery顯示.XML文件中的數據，而之前我使用XSLT文件進行樣式化和顯示。到目前爲止，我正在取得良好進展，但我似乎沒有掌握.each循環的工作方式，或至少如何使其正常工作。

下面是我想從顯示幾件事情我的XML文件：

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<!--<?xml-stylesheet type="text/xsl" href="testimonials.xsl"?>--> 
<!DOCTYPE testimonials SYSTEM "testimonials.dtd"> 

<testimonials> 
    <feedback> 
    <quote>Impressively well-versed in their knowledge of GM motors. Very nice and courteous staff, shipping was fast too. Will be purchasing again.</quote> 
    <name>Rich</name> 
    <location>Chester, NY</location> 
    </feedback> 
    <feedback> 
    <quote>Huge selection and extremely helpful staff got me just what I was looking for for my Cobalt SS. Very Happy!</quote> 
    <name>Justin S.</name> 
    <location>Buffalo, NY</location> 
    </feedback> 
    <feedback> 
    <quote>My wife managed to blow up my Tahoe on her way to work. You guys had a new motor to me in less than a week. Couldn't be happier</quote> 
    <name>Jake</name> 
    <location>Matamoras, PA</location> 
    </feedback> 
</testimonials> 

夠簡單了吧？現在我所要做的就是使用AJAX將其顯示在我的頁面上。我要爲格式是這樣的：

「報價」 - 姓名 - 位置

一個例子是：

"Huge selection and extremely helpful staff got me just what I was looking for for my Cobalt SS. Very Happy!" - Justin S. - Buffalo, NY 

請注意這個例子的代碼標籤顯示我想要如何顯示在我的網頁上。 所有在一條線上。我覺得最簡單的方法是使用一個表格，每一行可以是一個新的評價，每行可以有3個單元格。一個用於報價，一個用於客戶名稱，另一個用於他們的家鄉。我必須爲所有3個推薦做到這一點。我在XSLT中可以正常工作，但出於某些令人非常沮喪的原因，我無法在使用AJAX時使其顯示正確。取代3次顯示報價，名稱和位置的循環，它顯示所有三個混合在一起的引號，然後將所有三個名稱拼湊在一起，並將所有三個位置擠在各自的段落中。

這裏是我的AJAX代碼（這是內嵌暫時，我打算將它移動到一個單獨的js文件在不久的將來的某個時間）：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $.ajax({ 
      type: "GET", 
      url: "../stylesheets/testimonials.xml", 
      dataType: "xml", 
      success: function (xml) { 
       $(xml).find('feedback').each(function() { 
        var quote = $(this).find('quote').text() 
        $("#p1").append(quote); 
        var name = $(this).find('name').text() 
        $("#p2").append(name); 
        var location = $(this).find('location').text() 
        $("#p3").append(location); 
       }); 

      } 
     }) 
    }); 

這裏是我的HTML，我想我的AJAX代碼寫入：

 <table id="table1"> 
     <tr> 
      <td><p id="p1">"</p></td> 
      <td><p id="p2">-</p></td> 
      <td><p id="p3">-</p></td> 
     </tr> 
     <tr> 
      <td><p id="p1">"</p></td> 
      <td><p id="p2">-</p></td> 
      <td><p id="p3">-</p></td> 
     </tr> 
     <tr> 
      <td><p id="p1">"</p></td> 
      <td><p id="p2">-</p></td> 
      <td><p id="p3">-</p></td> 
     </tr> 
     </table> 

在XSL這很容易，因爲我會使用一個For Each循環通過每一個「反饋」標籤的XML進行迭代，然後使用Value-Of來顯示像這樣的相關數據： （用於演示目的XSL文件）

<xsl:for-each select="testimonials/feedback"> 
     <table id="infoTestimonials"> 
     <tr> 
      <td> 
      <font class="infoQuotes">"</font><xsl:value-of select="quote"/><font class="infoQuotes">"</font> 
      </td> 
      <td> - <font size="2pt"><xsl:value-of select="name"/></font></td> 
      <td> - <font size="2pt"><xsl:value-of select="location"/></font></td> 
     </tr> 
     </table> 
    </xsl:for-each> 

我怎麼能反映什麼我顯示，從而容易在XSL使用AJAX？我很高興能夠進入網絡編程的世界，但是我已經將我的頭髮凌亂了超過4個小時，試圖讓它在沒有運氣的情況下正常工作。

Answer 1

在單個頁面中使用相同的ID多次無效：

<table id="table1"> 
    <tr> 
    <td><p id="p1">"</p></td> 
    <td><p id="p2">-</p></td> 
    <td><p id="p3">-</p></td> 
    </tr> 
    <tr> 
    <td><p id="p1">"</p></td> 
    <td><p id="p2">-</p></td> 
    <td><p id="p3">-</p></td> 
    </tr> 
    <tr> 
    <td><p id="p1">"</p></td> 
    <td><p id="p2">-</p></td> 
    <td><p id="p3">-</p></td> 
    </tr> 
</table> 

您正在使用每個ID（P1，P2，和P3）在本實施例中的3倍。在您的jQuery代碼中，您嘗試使用$("#p1").append(quote);，但由於「p1」id發生三次，因此它有三個地方可以追加數據。我會做這樣的事情：

$(document).ready(function() { 
    $.ajax({ 
     type: "GET", 
     url: "../stylesheets/testimonials.xml", 
     dataType: "xml", 
     success: function (xml) { 
      var i = 1; //Create iterator variable. 
      $(xml).find('feedback').each(function() { 
       var quote = $(this).find('quote').text(); 
       var name = $(this).find('name').text(); 
       var location = $(this).find('location').text(); 
       var testimonial = "\"" + quote + "\" - " + name + " - " + location; //Add formatting to testimonial. 
       $("#p"+i).html(testimonial); //Select id that is "p"+i. 
       i++; //Iterate variable before repeat. 
      }); 

     } 
    }); 
}); 

這將創建一個爲1的值的變量i當.each循環第一次運行時，它會選擇「P1」 ID和數據插入到它。第二次運行時，它將選擇「p2」標識並將數據插入到該標識中，依此類推。你將不得不改變你的HTML如下：

<table id="table1"> 
    <tr> 
    <td><p id="p1"></p></td> 
    </tr> 
    <tr> 
    <td><p id="p2"></p></td> 
    </tr> 
    <tr> 
    <td><p id="p3"></p></td> 
    </tr> 
</table> 

你應該小心JavaScript中的分號，因爲你留下了幾個。