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()。

jQuery刷新从json接收的数据

6 个答案: