Question

我有一组jSon数据（无错误），我需要使用$ .each函数循环，但它只显示来自jSon的最后一条数据记录。

这是我所拥有的jquery：

$.ajax({
type: "POST",
url: '/update-recent-stat',
dataType: 'json',
success: function(jsonData)
    {
        var counterjson = 1;

        $.each(jsonData, function(i, value){
            var count = counterjson++;
            var link = jsonData[count].linkid;
            var time = jsonData[count].time;
            var value = jsonData[count].value;
            var sender = jsonData[count].sender;

           $("#DownBoxL ul li").html("<div class=Timestamp>"+time+"</div><div class=UserName><a href=\"#"+link+"\">"+sender+"</a> ("+count+") msg sent!</div><div class=TagValue>+"+value+"</div>").show();
         });
    }
});

所以thejSon数据是一个包含15条记录的集合，例如：

[{"counter":"1","linkid":"1448524027","sender":"User1","value":"5","time":"5 sec ago"},{"counter":"2","linkid":"1448524027","sender":"User2","value":"5","time":"5 min ago"}]

对于记录，使用这段代码只显示最后一条记录！

有谁知道问题出在哪里？

谢谢，问候。

Answer 1

因为您每次都会覆盖所有li的HTML。您可以使用eq使相同的代码生效。使用$.getJSON它很容易用于JSON数据，它足以满足您的需求。

$.getJSON('/jsonurl/file.json', function(jsonData)
{
   var counterjson = 1;

   $.each(jsonData, function(i, value){
        var count = counterjson++;
        var link = jsonData[count].linkid;
        var time = jsonData[count].time;
        var value = jsonData[count].value;
        var sender = jsonData[count].sender;

        $("#DownBoxL ul li:eq(" + i + ")).html("<div class=Timestamp>"+time+"</div><div class=UserName><a href=\"#"+link+"\">"+sender+"</a> ("+count+") msg sent!</div><div class=TagValue>+"+value+"</div>").show();
     });
}

}）;

Answer 2

正如汤姆所说，你反复覆盖，而不是附加HTML。

但是，一般而言，从JavaScript编写HTML标记并不是一个好主意。例如，如果sender字符串可以包含像<这样的HTML特殊字符，那么您只是给自己一个客户端HTML注入漏洞。

jQuery为您提供了一些很好的工具，可以轻松直接访问DOM节点。使用它们，您最终可以获得更易维护和更安全的代码。例如

success: function(jsonData) {
    $.each(jsonData, function(i, value){
        $('#DownBoxL ul li').append(
            $('<div class="Timestamp">', {text: value.time})
        ).append(
            $('<div class="UserName">').append(
                $('<a>', {href: '#'+value.linkid, text: value.sender})
            ).append(' ('+i+') msg sent!')
        ).append(
            $('<div class="TagValue">', {text: value.value})
        );
    }
}

Answer 3

这将有效

success: function(jsonData)
{
    var count= 1;
    var htmlData = '';

    $.each(jsonData, function(i, value){

        count++;
        var link = jsonData[count].linkid;
        var time = jsonData[count].time;
        var value = jsonData[count].value;
        var sender = jsonData[count].sender;

       htmlData += "<div class=Timestamp>"+time+"</div><div class=UserName><a href=\"#"+link+"\">"+sender+"</a> ("+count+") msg sent!</div><div class=TagValue>+"+value+"</div>";
     });

     $("#DownBoxL ul li").html( htmlData ).show();

}

Answer 4

值与jsonData [i];

相同

success: function(jsonData)
{
    var htmlData = '';
    $.each(jsonData, function(i, value){    
       htmlData += "<div class=Timestamp>"+value.time+"</div><div class=UserName><a href=\"#"+value.link+"\">"+value.sender+"</a> ("+ ( i+1 ) +") msg sent!</div><div class=TagValue>+"+value.value+"</div>";
     });

     $("#DownBoxL ul li").html( htmlData ).show();

}

jQuery每个循环都不适用于json数据

4 个答案: