如何克隆和更改 ID？

我需要克隆 id，然后在它后面添加一个数字，比如 id1、 id2等等。每次你点击克隆，你就把克隆放在最新的 ID 号后面。

$("button").click(function() {
$("#id").clone().after("#id");
});
206862 次浏览
小开

更新: 正如 Roko C.Bulijan指出的。.你需要使用。在选定的 div 之后插入它。如果希望将更新后的代码添加到末尾，而不是在多次克隆时开始，请参见更新后的代码。译自: 美国《科学》杂志网站(http://jsfiddle.net/HGtmR/4/rel = “ noReferrer”)

密码:

   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");
});
小开
最佳答案 

$('#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>

加密元素，检索最高 ID

假设有许多元素具有诸如 klon--5之类的 ID，但是它们是乱序的(不是按顺序排列的)。在这里，我们使用 不能来获取 :last或 :first，因此我们需要一种机制来检索最高 ID:

const all = document.querySelectorAll('[id^="klon--"]');
const maxID = Math.max.apply(Math, [...all].map(el => +el.id.match(/\d+$/g)[0]));
const nextId = maxID + 1;


console.log(`New ID is: ${nextId}`);
<div id="klon--12">12</div>
<div id="klon--34">34</div>
<div id="klon--8">8</div>

小开

我已经创建了一个通用的解决方案。下面的函数将更改已克隆对象的 id 和名称。在大多数情况下，您需要行号，因此只需将“ data-row-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').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>
小开

这个也可以

 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>


提交答案