javascript - append 函数将以前的数据附加到新数据

Question

我有来自 ajax 的以下数据，我试图在 UI 的弹出窗口中显示这些数据:

[{"BadgeImage":"http:\/\/localhost:8666\/web1\/profile\/images\/badge image 2\/1.png"},

{"BadgeImage":"http:\/\/localhost:8666\/web1\/profile\/images\/badge image 2\/beyond.png"},

{"BadgeImage":"http:\/\/localhost:8666\/web1\/profile\/images\/badge image 2\/completionist.png"}]

我正在使用下面的 Jquery 在弹出窗口中显示它:

$.each(data, function(index, value) {
  var $img = $('<img src="' + data[index].BadgeImage + '"/>'); // create the image
  $img.addClass('badge-image'); // add the class .badge-image to it

  $('#imagesofBadges').append($img); // append it
  $('#imagesofBadges .badge-image'); // will fetch all the elements that have the class .badge-image that are inside #imagesofBadges.

});

我能够显示图像。

问题是每次我单击显示弹出窗口的元素时，前一个弹出窗口的图像都会附加到新的弹出窗口中。

我尝试使用 jquery 中存在的 one() 并尝试使用下面代码中的计数器，但没有成功。

$.each(data, function(index, value) {
  var $img = $('<img src="' + data[index].BadgeImage + '"/>'); // create the image
  $img.addClass('badge-image'); // add the class .badge-image to it
  if (counter <= 0) {
    $('#imagesofBadges').append($img); // append it
    $('#imagesofBadges .badge-image'); // will fetch all the elements that have the class .badge-image that are inside #imagesofBadges.
    counter++;
  }
});

请帮助我了解如何显示图像，这样它就不会附加到弹出窗口的先前数据中。

Answer 1

需要清空容器之前的内容，可以使用.empty()

Remove all child nodes of the set of matched elements from the DOM.

$('#imagesofBadges').empty();
$.each(data, function(index, value) {
  //Your code
});