javascript - 追加到div时我的jquery被覆盖

我正在下面的HTML代码段中，我想循环遍历一个计数，然后将每个图像HTML元素附加到div中，但是循环遍历下面的代码，仅添加最后一个项目。我认为它正在覆盖它或某些东西，或者元素的复制未按我的想法工作。

var $container = $('#facebook-body-container');
$container.empty();

var $albumImage = $(".facebook-image");

for (var i = 0; i < response.albums.data.length; i++) {
  var tempImage = $albumImage;
  $(tempImage).find(".thumbnail").attr("id", response.albums.data[i].id);
  $(tempImage).find("img").attr("src", response.albums.data[i].picture.data.url);
  $(tempImage).find(".album-title").text(response.albums.data[i].name);
  $(tempImage).find(".album-photo-count").text(response.albums.data[i].photo_count);
  $container.append(tempImage);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="imageThumbnailContainer" style="display: none;">
  <div class="col-sm-4 facebook-image">
    <div id="" class="thumbnail" style="border: 1px solid #ddd;">
      <img class="img-responsive" src="" />
      <div class="caption">
        <h4 class="album-title"></h4>
        <p class="album-photo-count"></p>
      </div>
    </div>
  </div>
</div>

最佳答案

您需要先克隆元素，然后再使用clone()方法更改属性，否则$albumImage将引用同一实例：

var tempImage = $albumImage.clone(true);

作为参数传递的布尔值true指示是否应将事件处理程序和数据与元素一起复制。

关于javascript - 追加到div时我的jquery被覆盖，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51704504/