如何为JQuery clone()和更改id

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (436)

我需要克隆这个id,然后在它后面添加一个数字,比如Id1,id2等等。每次你点击克隆,你就把克隆放在最新的编号之后。

   $("button").click(function(){
   $("#id").clone().after("#id");
   }); 
提问于
用户回答回答于
$('#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>
用户回答回答于

需要使用.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");
   }); 

扫码关注云+社区

领取腾讯云代金券