如何使用的.html中顯示多個記錄

我用下面的代碼獲取使用AJAX，jQuery的，PHP，JSON成員及其相關信息的列表。唯一的問題是，當我使用.html，它只顯示第一個記錄，它不顯示所有的記錄。完全困惑。如何使用的.html中顯示多個記錄

<script type="text/javascript"> 
$(document).delegate("#member_home", "pagecreate", function() { 
    var refreshId = setInterval(function(){ 
     var friends= new Array(); 
     $.ajaxSetup({cache: false}) 
     $.ajax({ 
      url:'http://www.l.example.com/app/scrip/friends_lookup.php', 
      data: "", 
      dataType: 'json', 
      success: function(data){ 
       $.each(data, function(key, val) { 
        var friend = val['friend']; 
        var phone = val['phone']; 
        var status = val['status']; 
        var email = val['email']; 
        var updated = val['updated']; 
        $('#member_friends').append("<div class='member-box'>"+friend+"<span class='status-pic1'><img src='images/"+status+".png' width='40' height='40'/></span><span class='phone_box'><a href='tel:"+phone+"'><img src='images/icons/phone.png' width='40' height='40' /></a></span><span class='email-box'><a href='mailto:"+email+"'><img src='images/mail.png' width='40' height='40' /></a></span><div class='clear'></div><span class='update-status'><i>last update:&nbsp;"+updated+"</i></span>"); 

       });            
      }             
     }); 
    }, 1500); 
}); 

</script>

我想這一點，並沒有奏效：

<script type="text/javascript"> 
$(document).delegate("#member_home", "pagecreate", function() { 
    var refreshId = setInterval(function() {            
     var friends= new Array(); 
     $.ajaxSetup({cache: false}) 
     $.ajax({ 
      url: 'http://www.l.example.com/pp/scripts/friends_lookup.php', 
      data: "", 
      dataType: 'json', 
      success: function(data){ 
       var output = []; 
       for (var i = 0, len = data.length; i < len; i++) { 
        output[output.length] = { 
         friend : data[i].friend, 
         phone : data[i].phone, 
         status : data[i].status, 
         email : data[i].email, 
         updated : data[i].updated 
        };             

        $('#member_friends').html("<div class='member-box'>"+friend+"<span class='status-pic1'><img src='images/"+status+".png' width='40' height='40'/></span><span class='phone_box'><a href='tel:"+phone+"'><img src='images/icons/phone.png' width='40' height='40' /></a></span><span class='email-box'><a href='mailto:"+email+"'><img src='images/mail.png' width='40' height='40' /></a></span><div class='clear'></div><span class='update-status'><i>last update:&nbsp;"+updated+"</i></span>"); 
       } 
      } 
     });           
    }, 1500); 
}); 
</script>

來源

2012-02-09 Bill paxton

與您的代碼縮進請告訴我？很難讀... – elclanrs 2012-02-09 00:15:56

我很抱歉，我從我的編輯複製和由於某些原因，它被認爲是搞砸了的 – 2012-02-09 00:16:54

可能重複[出於某種原因，我不能讓我的jQuery代碼的工作（http://stackoverflow.com /問題/ 9204052 /換一些，原因-I-着，讓 - 我 - jQuery的代碼到工作） – 2012-02-09 01:28:57

你實在過分的值寫你$.each循環的每個迭代。循環之前，創建一個數組來存儲數據，然後添加到陣列中的每個迭代：

$.ajax({ 
    success : function (data) { 
     var output = []; 
     for (var i = 0, len = data.length; i < len; i++) { 
      output[output.length] = { 
       friend : data[i].friend, 
       phone : data[i].phone, 
       status : data[i].status, 
       email : data[i].email, 
       updated : data[i].updated 
      }; 
     } 
     //you now have an array of objects that each contain a set of information 
    } 
});

的for循環我用的是相當快的，這裏有一個JSPerf在使用$.each()，顯示性能提升：http://jsperf.com/jquery-each-vs-for-loops/2

而且你可能已經注意到，我用output[output.length] = ...代替output.push(...)。前者在舊瀏覽器中執行速度更快（後者在現代瀏覽器中執行得更快），但我傾向於嘗試幫助舊瀏覽器，因爲他們確實需要幫助。

來源

2012-02-09 00:19:14 Jasper

我猜你的問題是，當你使用的.html（）在一個循環中，每次迭代，它將替換是以.html（）之前的迭代中添加的所有內容。從邏輯上講，這隻會讓你只有最後一個記錄，而不是第一個記錄。

來源

2012-02-09 00:22:47

你必須在循環後調用.html（），目前它會在每個循環迭代中替換#member_friends 的內容，所以你總是會看到最後一個項目。

這應該是解決方法：

var output = []; 
var html = [] 
for (var i = 0, len = data.length; i < len; i++) { 
    output[output.length] = { 
     friend : data[i].friend, 
     phone : data[i].phone, 
     status : data[i].status, 
     email : data[i].email, 
     updated : data[i].updated 
    };             

    html.push("<div class='member-box'>"+friend+"<span class='status-pic1'><img src='images/"+status+".png' width='40' height='40'/></span><span class='phone_box'><a href='tel:"+phone+"'><img src='images/icons/phone.png' width='40' height='40' /></a></span><span class='email-box'><a href='mailto:"+email+"'><img src='images/mail.png' width='40' height='40' /></a></span><div class='clear'></div><span class='update-status'><i>last update:&nbsp;"+updated+"</i></span>"); 
}//end of for 
$('#member_friends').html(html.join(''));

來源

2012-02-09 01:53:28 jerjer

如何使用的.html中顯示多個記錄

回答

相關問題