Question

这就是我所拥有的：的

HTML

<div class="table-product-wrap-inner">
  <table class="table-product">
    <tbody>
      <tr>
        <td></td>
        .........
        <td>
          <buttom class="btn-copy-link"></button>
        </td>
      </tr>
    </tbody>
  </table>
  <button class="dont-copy-that-btn></button>
  <div class="collapse"></div>
</div>

JQ

init: function () {
      var that = this;

      this.$productEdit.on('click', '.btn-copy-link', function(){
          var $cTable = $(this).closest('.table-product'),
              $ele = $cTable.clone(true),
              $gName = $ele.find('td:first'),
              $lName = $ele.find('.product-link-title'),
              $idL = $ele.find('.product-link-id');

          $cTable.after($ele);
          $gName.empty();
          $lName.val($lName.val() + " Копия");
          $idL.val('');
        });
}

当前函数复制最近的table并将其插入原文后但我还需要复制最近的div，其中包含collapse类和过去table + {{1之后div。复制collapse中的button。

这样的事情：

table

点击后

：

<div class="table-product-wrap-inner">
  <table class="table-product">
    <button class="btn-copy-link"></button>
  </table>
  <button class="dont-copy-that-btn></button>
  <div class="collapse"></div>
</div>

如果用户在第一对<div class="table-product-wrap-inner"> <table class="table-product"> <button class="btn-copy-link"></button> </table> <button class="dont-copy-that-btn></button> <div class="collapse"></div>  <table class="table-product"> <button class="btn-copy-link"></button> </table> <div class="collapse"></div> </div> + button中再次点击table，则会在该对后复制它们。如果我们在第二对中单击div - 在第二对之后获得副本等等

Answer 1

您可以使用最近的表格元素中的next()来查找所需的div。试试这个：

this.$productEdit.on('click', '.btn-copy-link', function(){
    var $cTable = $(this).closest('.table-product'),
        $div = $cTable.next('div.collapsed'),
        $ele = $cTable.clone(true);

    $ele.find('td:first').empty();
    $ele.find('.product-link-title').val($lName.val() + ' Копия');
    $ele.find('.product-link-id').val('');

    $div.after($ele); // insert table clone after previous div
    $ele.after($div.clone(true)); // append cloned div after new table clone
});

使用jQuery单击时复制特定结构

1 个答案: