使用下面的代码，每当score.php中的分数（json）发生变化时，我都想更新排行榜<div id='result'></div>。
我尝试用setInterval包装整个$.getJSON查询，但它在每次setInterval触发时都会复制列表项，而不仅仅是用新的score json对象更新列表项。
到目前为止，代码在刷新页面时有效，但我希望它能动态更新。
有什么想法可以达到我想要的效果吗？TIA-
index.php
<div id='result'></div>
script.js
$(document).ready(function(){
$('#result').html('<ul></ul>');
setInterval(function(){
$.getJSON('score.php', function(data){
$.each(data, function(i){
$('#result > ul').append('<li>'+i+' : '+data[i]+'</li>');
});
});
},1000);
});
记分.php
<?php
$result = [
"player1"=>5,
"player2"=>20,
"player3"=>7
];
arsort($result);
echo json_encode($result);
//输出
player2 : 20
player3 : 7
player1 : 5
注意：我已经修改了script.js来显示这个问题。问题是每次setInterval启动时，列表项都是重复的，这不是我想要的。
我真正想要的是，原始的列表项目只会更新以反映分数的变化。php每当玩家获得更高的分数时，它就会显示在排行榜上。
更新：根据下面的@Peekayy和@user26409021回答，这个问题已经得到解决。但我不知道哪一个更有效，所以我会把这个问题留几天，为两个答案争取更多的选票，然后我会选择一个答案。谢谢各位；）
对于每个setInterval，都会附加与JSON结果相对应的新<li>项。这不会清除现有节点。这就是为什么它似乎是重复项目。
您必须使用$（'#result>ul'）.empty（）清除#result子级；在添加新节点之前。
$(document).ready(function(){
$('#result').append('<ul></ul>');
$.getJSON('score.php', function(data){
$('#result > ul').empty();
$.each(data, function(i){
$('#result > ul').addClass('result-list').append('<li>'+i+' : '+data[i]+'</li>');
});
});
});
此外，我想知道对每个玩家的分数使用addClass('result-list')是否相关。我认为你应该只做一次，这样会更干净。
我建议的最终代码：
$(document).ready(function(){
var resultList = $('#result').append('<ul></ul>');
resultList.addClass('result-list');
setInterval(function(){
$.getJSON('score.php', function(data){
resultList.empty();
$.each(data, function(i){
resultList.append('<li>'+i+' : '+data[i]+'</li>');
});
});
}, 30000);
});
您真正需要的不是.append，而是.html，它将从div中删除上一个元素。这样做，您就不会有重复的条目。
$('#result').html('<ul></ul>');
setInterval(function(){
$.getJSON('score.php', function(data){
$('#result').html('<ul></ul>');//reset here..
$.each(data, function(i){
$('#result > ul').append('<li>'+i+' : '+data[i]+'</li>');
});
});
},1000);