從json收到的jQuery刷新數據

Question

我想從另一臺服務器獲取數據並將其顯示在我的網站上。遠程服務器使用jsonp，所以我使用jQuery。我的代碼看起來是這樣的：

$.getJSON(json_url, function(data) { 
    var items = []; 
    $.each(data, function(key, val) { 
    items.push("<li id=" + key + ">" + val + "</li>"); 
    }); 

    $("<ul/>", { 
    "class": "my-new-list", 
    html: items.join("") 
    }).appendTo("#my-id"); 
}); 

我想打一分鐘之後另一個請求，以檢查是否有新的數據，所以我可能會使用setInterval(main, 60000)或類似這樣的東西。

但問題是，當我得到新的數據，舊的不清除。所以我會有li元素與新舊價值。

我應該如何更改我的代碼以清除舊數據？

Answer 1

嘗試：

$("#my-id").html($("<ul/>", { 
    "class": "my-new-list", 
    html: items.join("") 
})); 

Answer 2

清除您的<ul>與.empty()方法追加新的項目，如在此之前：

$.getJSON(json_url, function(data) { 
    var items = []; 
    $.each(data, function(key, val) { 
    items.push("<li id=" + key + ">" + val + "</li>"); 
    }); 

    $("#my-id").empty(); 

    $("<ul/>", { 
    "class": "my-new-list", 
    html: items.join("") 
    }).appendTo("#my-id"); 
}); 

Answer 3

地說：

$("#my-id").empty(); 

在回調函數的開始。 .appendTo做它的名字意味着什麼，它追加到元素而不是替換內容。

Answer 4

您使用appendTo因此舊的數據不被清除。

使用

$("#my-id").html($("<ul/>", { 
    "class": "my-new-list", 
    html: items.join("") 
})); 

或明確使用

$("#my-id").html('') 

Answer 5

使用jQuery刪除

$("#my-id").remove(); 

您可以刪除數據包含元素，然後重新添加

Answer 6

就明確ul之後追加li項目。您可以使用$('ul-id').empty()或$('ul-id li').detach()。