如何克隆和更改ID？

Question

我需要克隆 id，然后在它后面添加一个数字，例如id1 、 id2等。每次点击 clone 时，都将克隆放在最新的 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 (ie: 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 (ie: 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

假设您有许多元素，其 ID 为klon--5但已加扰（不按顺序）。 这里我们不能使用: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>

Answer 2

更新：正如Roko C.Bulijan指出的那样......你需要使用 .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
   }); 

---

尝试，

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

如果你想要一个自动计数器，然后看下面，

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

Answer 3

这是对我有用的最简单的解决方案。

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

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

我已经创建了一个通用的解决方案。 下面的函数将更改克隆对象的 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;
}

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>