javascript - 如何更改克隆div中的img src？

Question

我有一个主div和另一个div和img，如下所示

$(".source_next_box")
  .clone()
  .removeClass('source_next_box')
  .find('img')
  .attr('src', data.url)
  .insertAfter(".next_box:last");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="next_box"></div>
<div class="col-lg-6 col-xl-4 source_next_box">
  <div class="card">
    <img class="card-img-top preview-img" src="img/preview.png">
    <div class="card-body pos-relative">
      <h6 class="card-title mb-3">Title</h6>
    </div>
    <div>
      <button type="button" class="btn btn-link remove-files" data-id="77"></button>
    </div>
  </div>
</div>

我需要使用 source_next_box 类克隆此 div 并将其放入 next_box 中，但删除 next_box 类，并更改 src 显示图像并更改按钮中的 data-id。

但结果我有

<div class="next_box"></div>
<img src="new_img_link>

我需要什么？

Answer 1

当您执行.find('img').attr()时使用链接您指的是<IMG>元素，因此它被附加到 DOM。

您需要使用 .end()

End the most recent filtering operation in the current chain and return the set of matched elements to its previous state.

$(".source_next_box")
    .clone()
    .removeClass('source_next_box')
    .find('img')
    .attr('src', data.url)
    .end() //<============
    .insertAfter(".next_box:last");

$(".source_next_box")
  .clone()
  .removeClass('source_next_box')
  .find('img')
  .attr('src', "https://www.gravatar.com/avatar/64272f530b4465cf2c8821156ddab99c?s=32&d=identicon&r=PG&f=1")
  .end()
  .insertAfter(".next_box:last");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="next_box"></div>
<div class="col-lg-6 col-xl-4 source_next_box">
  <div class="card">
    <img class="card-img-top preview-img" src="https://www.gravatar.com/avatar/64272f530b4465cf2c8821156ddab99c?s=32&d=identicon&r=PG&f=1">
    <div class="card-body pos-relative">
      <h6 class="card-title mb-3">Title</h6>
    </div>
    <div>
      <button type="button" class="btn btn-link remove-files" data-id="77">button</button>
    </div>
  </div>
</div>