使用 jQuery append/html 更新 div

Question

我从外部 JSON 文件获取数据，每个文件循环使用 jQuery，然后输出到 HTML。

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

通过追加，它会输出我所有的 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 的一个 "long" 字符串并将其设置为 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);

作为添加的 "bonus"，您将获得更高的性能，因为操作字符串比操作 DOM.

快得多

使用 jQuery append/html 更新 div

Updating divs with jQuery append/html

javascript

jquery

json

append