Question

我需要克隆id，然后在它之后添加一个数字id1，id2等。每当你点击克隆时，你将克隆放在最新数量的id之后。

$("button").click(function() {
    $("#id").clone().after("#id");
});

Answer 1

$('#cloneDiv').click(function(){


  // get the last DIV which ID starts with ^= "klon"
  var $div = $('div[id^="klon"]:last');

  // Read the Number from that DIV's ID (i.e: 3 from "klon3")
  // And increment that number by 1
  var num = parseInt( $div.prop("id").match(/\d+/g), 10 ) +1;

  // Clone it and assign the new ID (i.e: from num 4 to ID "klon4")
  var $klon = $div.clone().prop('id', 'klon'+num );

  // Finally insert $klon wherever you want
  $div.after( $klon.text('klon'+num) );

});

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

<button id="cloneDiv">CLICK TO CLONE</button> 

<div id="klon1">klon1</div>
<div id="klon2">klon2</div>

Answer 2

更新：正如Roko C.Bulijan指出的那样..你需要使用.insertAfter在所选的div之后插入它。如果您希望将其附加到末尾而不是多次克隆时开始，请参阅更新的代码。 DEMO

<强>代码：

   var cloneCount = 1;;
   $("button").click(function(){
      $('#id')
          .clone()
          .attr('id', 'id'+ cloneCount++)
          .insertAfter('[id^=id]:last') 
           //            ^-- Use '#id' if you want to insert the cloned 
           //                element in the beginning
          .text('Cloned ' + (cloneCount-1)); //<--For DEMO
   });

尝试，

$("#id").clone().attr('id', 'id1').after("#id");

如果您想要自动计数器，请参阅下面的

   var cloneCount = 1;
   $("button").click(function(){
      $("#id").clone().attr('id', 'id'+ cloneCount++).insertAfter("#id");
   });

Answer 3

我创建了一个通用的解决方案。下面的函数将更改克隆对象的ID和名称。在大多数情况下，您将需要行号，因此只需在对象中添加“data-row-id”属性即可。

> = &gt; = &#62;
< = &lt; = &#60;

Answer 4

这也可以

 var i = 1;
 $('button').click(function() {
     $('#red').clone().appendTo('#test').prop('id', 'red' + i);
     i++; 
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="test">
  <button>Clone</button>
  <div class="red" id="red">
  </div>
</div>

<style>
  .red {
    width:20px;
    height:20px;
    background-color: red;
    margin: 10px;
  }
</style>

Answer 5

这是最适合我的解决方案。

$('#your_modal_id').clone().prop("id", "new_modal_id").appendTo("target_container");

Answer 6

$('#cloneDiv').click(function(){


  // get the last DIV which ID starts with ^= "klon"
  var $div = $('div[id^="klon"]:last');

  // Read the Number from that DIV's ID (i.e: 3 from "klon3")
  // And increment that number by 1
  var num = parseInt( $div.prop("id").match(/\d+/g), 10 ) +1;

  // Clone it and assign the new ID (i.e: from num 4 to ID "klon4")
  var $klon = $div.clone().prop('id', 'klon'+num );

  // Finally insert $klon wherever you want
  $div.after( $klon.text('klon'+num) );

});

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

如何jQuery clone（）和更改ID？

6 个答案: