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

结束当前链中的最新过滤操作，并将匹配的元素集返回到其先前状态。

$(".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>

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

1 个答案: