jquery循环getJson

Question

Jquery代码

<script type="text/javascript">
$(document).ready(function()
{
$.getJSON("http://localhost/index.php/upload/history",function(data)
{
$.each(data.images, function(i,data)
{
$('#recent').html( '<img src="/t/'  +data.imagename + '">' );
});
}
);
return false;
});
</script>

示例json数据

{
    "images": [
        {
            "imagename": "p5Tsa.jpg"
        },
        {
            "imagename": "Z8hjA.jpg"
        },
        {
            "imagename": "0Fnm0.jpg"
        },
        {
            "imagename": "D5Tfa.jpg"
        },
        {
            "imagename": "VDnvu.jpg"
        },
        {
            "imagename": "9spgp.jpg"
        },
        {
            "imagename": "Hg7va.jpg"
        }
    ]
}

这只显示第一个图像..但是当我使用append（）时，它会显示json响应中的所有图像..我想要避免追加的原因是我要刷新div usng setInterval（ ）。

如何使用.html（）显示我在json响应中获得的所有图像？

谢谢：）

Answer 1

使用append，但清除每次获取时的html。

<script type="text/javascript">
$(document).ready(function()
{
$.getJSON("http://localhost/index.php/upload/history",function(data)
{
$('#recent').html("");
$.each(data.images, function(i,data)
{
$('#recent').append( '<img src="/t/'  +data.imagename + '">' );
});
}
);
return false;
});
</script>

Answer 2

当您致电html()时，您正在设置元素的全部内容。有几种方法可以解决这个问题。我会做的

$.getJSON("http://localhost/index.php/upload/history",function(data) {
    var images = $.map(data.images, function(data) {
        return '<img src="/t/'  +data.imagename + '">';
    }).get();
    $('#recent').html(images.join(''));
});

仅插入文档一次。

你可以轻松地对append做同样的事情，你只需要清除之前的内容。