4

我有一组 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();
         });
    }
});

所以 jSon 数据是一个包含 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"}]

为了记录，这段代码只显示最后一条记录！

有谁知道问题出在哪里？

感谢和问候。

4

4 回答 4

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

});

于 2012-12-29T11:44:49.673 回答
1

正如汤姆所说，您反复覆盖而不是附加到 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})
        );
    }
}
于 2012-12-29T12:01:40.487 回答
0

这将起作用

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();

}
于 2012-12-29T11:45:38.510 回答
0

值与 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();

}
于 2012-12-29T11:48:46.853 回答