代码之家  ›  专栏  ›  技术社区  ›  chuckd

我的jquery在附加到div时被覆盖

  •  1
  • chuckd  · 技术社区  · 7 年前

    下面是这个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>
    1 回复  |  直到 7 年前
        1
  •  2
  •   Zakaria Acharki    7 年前

    在使用 clone() 方法,否则 $albumImage 将引用同一实例:

    var tempImage = $albumImage.clone(true);
    

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