Как использовать .html для отображения нескольких записей

Question

Я использую следующий код, чтобы получить список участников и их информацию, используя ajax, jquery, php, json. Единственная проблема, когда я использую .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> 

Answer 1

Вы перезаписывания значения каждой итерации вашего $.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(...). Первый работает быстрее в старых браузерах (последний работает быстрее в современных браузерах), я стараюсь помочь старым браузерам, так как им действительно нужна помощь.

Answer 2

Я думаю, ваша проблема в том, что когда вы используете .html() внутри цикла, для каждой итерации он заменит все содержимое, добавленное с помощью .html() во время предыдущей итерации. Логично, что, тем не менее, оставит вас только с последней записью, а не с первой.

Answer 3

Вы должны позвонить .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(''));