Javascript 如何使用jQuery克隆（）并更改id？

我需要克隆id，然后在其后面添加一个数字，如

id1

，

id2

，等等。每次点击克隆时，都会将克隆放在id的最新数字之后

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

---

更新：如前所述。。您需要使用.insertAfter将其插入所选div之后。如果希望在多次克隆时将其附加到末尾而不是开头，请参见更新的代码

代码：

   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
   }); 

如果您想要一个自动计数器，请参见下文

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

$（'#cloneDiv'）。单击（函数（）{
//获取ID以^=“klon”开头的最后一个DIV
var$div=$（'div[id^=“klon”]：last'）；
//读取该分区ID中的数字（即“klon3”中的3）
//然后将这个数字增加1
var num=parseInt（$div.prop（“id”）.match（/\d+/g），10）+1；
//克隆它并分配新ID（即：从num 4到ID“klon4”）
var$klon=$div.clone（）.prop（'id'，'klon'+num）；
//最后，将$klon插入到您想要的任何位置
$div.after（$klon.text（'klon'+num））；
});

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

function renameCloneIdsAndNames( objClone ) {

    if( !objClone.attr( 'data-row-id' ) ) {
        console.error( 'Cloned object must have \'data-row-id\' attribute.' );
    }

    if( objClone.attr( 'id' ) ) {
        objClone.attr( 'id', objClone.attr( 'id' ).replace( /\d+$/, function( strId ) { return parseInt( strId ) + 1; } ) );
    }

    objClone.attr( 'data-row-id', objClone.attr( 'data-row-id' ).replace( /\d+$/, function( strId ) { return parseInt( strId ) + 1; } ) );

    objClone.find( '[id]' ).each( function() {

        var strNewId = $( this ).attr( 'id' ).replace( /\d+$/, function( strId ) { return parseInt( strId ) + 1; } );

        $( this ).attr( 'id', strNewId );

        if( $( this ).attr( 'name' ) ) {
            var strNewName  = $( this ).attr( 'name' ).replace( /\[\d+\]/g, function( strName ) {
                strName = strName.replace( /[\[\]']+/g, '' );
                var intNumber = parseInt( strName ) + 1;
                return '[' + intNumber + ']'
            } );
            $( this ).attr( 'name', strNewName );
        }
    });

    return objClone;
}

这是对我来说最简单的解决方案

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

$（'#cloneDiv'）。单击（函数（）{
//获取ID以^=“klon”开头的最后一个DIV
var$div=$（'div[id^=“klon”]：last'）；
//读取该分区ID中的数字（即“klon3”中的3）
//然后将这个数字增加1
var num=parseInt（$div.prop（“id”）.match（/\d+/g），10）+1；
//克隆它并分配新ID（即：从num 4到ID“klon4”）
var$klon=$div.clone（）.prop（'id'，'klon'+num）；
//最后，将$klon插入到您想要的任何位置
$div.after（$klon.text（'klon'+num））；
});


这也有效


var i=1；
$（“按钮”）。单击（函数（）{
$（'#red'）.clone（）.appendTo（'#test'）.prop（'id'，'red'+i）；
i++；
});

克隆
瑞德先生{
宽度：20px；
高度：20px；
背景色：红色；
利润率：10px；
}
您错过了在代码中使用
'id'++id
的好机会。@RokoC.Buljan您是对的，但问题是如何更改克隆元素的属性，因此我没有注意到
.after
。请参阅更新的答案。：+1将其四舍五入为5！；）很好地使用了
[id^=id]：最后一个
恭喜。这也可以应用于名称吗？+1用于工作演示：），谢谢查看我的答案。我已经更新了帖子，还添加了一个工作演示，在div中是否也可以有一个按钮来删除当前的id div？@user1324780是的，这是可能的，但你应该将其作为一个新问题发布。无论如何，线索是找到最接近的（div[id^=id]）
和
。删除该div。完全符合我的需要。它很可能为我节省了数小时的开发时间！thanksHow是否将此与$（this）一起使用？？它不是工作$（this）。（'div[id^=“picker time start”]）；
$('#your_modal_id').clone().prop("id", "new_modal_id").appendTo("target_container");