使用 jQuery append/html 更新 div

Question

我从一个外部 JSON 文件中获取数据，我用 jQuery 循环遍历该文件，然后输出到 HTML。

由于 JSON 数据经常更新，我还想每分钟左右更新这些 div 中的 HTML。我一直在阅读此内容并了解完成此操作的最简单方法是使用 html() 而不是 append()。这对我不起作用，因为它只输出循环中的最后一个 div。

使用 append 它会输出我所有的 div，但当然，当脚本再次运行时它们会继续堆叠。我已经尝试通过在执行其他任何操作之前清除要附加的 div 来解决此问题，但这会导致可怕的闪烁。

有没有办法解决这个问题？

这是我的 empty() 解决方法的代码。

<div class="content lounge-content"></div>

<script type="text/javascript">
function repeat(){
    $('.lounge-content').empty();
    $.getJSON('https://api.import.io/store/data/dde648b1-fae1-49c1-a4b8-a084e34119fd/_query?input/webpage/url=http%3A%2F%2Fcsgolounge.com%2F&_user=213e76f7-c31e-4e56-bd2f-b7463aa8df8e&_apikey=213e76f7c31e4e56bd2fb7463aa8df8e4d47f273f4f49901a03092c93455f74df3cb1f165c675c467e69380c0f2fcac66cbbe5db7e92a0764d915fc8ab62f46a64e1298b3514ce2c2d6fd43f211f91a7', function(data) 
    {
        $.each(data.results, function(key, val) {
            $(".lounge-content").append('<a href="'+val.MATCH_LINK+'" target="_blank"><div class="lounge-item"><p>'+val.whenm_text+'</p><h3>'+val.team1+'</h3><span>'+val.team1_percent+'</span><p> - </p><span>'+val.team2_percent+' </span><h3>'+val.team2+'</h3><p>'+val.best_of+', '+val.EVENTM_TEXT+'</p></div></a><hr>');
        })
    });
}

setInterval(repeat, 5000);
</script>

Answer 1

您应该在获取 json 数据后清空 html 部分

function repeat(){
  $.getJSON('url', function(data) {
      $('.lounge-content').empty();
      $.each(data.results, function(key, val) {
        $(".lounge-content").append('thing');
    })
  });
}

Answer 2

为整个 HTML 构造一个“长”字符串并将其设置为 html 属性：

function repeat() {
    $.getJSON('https://api.import.io/store/...', function(data) {
        var longHTML = '';
        $.each(data.results, function(key, val) {
            longHTML += '<a href="'+val.MATCH_LINK+'" target="_blank"><div class="lounge-item"><p>'+val.whenm_text+'...';
        });
        $(".lounge-content").html(longHTML);
    });
}

setInterval(repeat, 5000);

作为额外的“奖励”，您将获得更高的性能，因为操作字符串比操作 DOM 快得多。