Как jQuery clone () и изменить идентификатор?

Question

Как jQuery clone () и изменить идентификатор?

мне нужно клонировать идентификатор, а затем добавить номер после него, как так id1,id2 и т. д. Каждый раз, когда вы нажимаете клон, вы ставите клон после последнего номера идентификатора.

$("button").click(function() {

    $("#id").clone().after("#id");

});

639 3

jQuery clone

3 ответов:

Comments

Ничего не найдено.

Roko C. Buljan · Accepted Answer · 2017-09-23 15:16:45

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

Selvakumar Arumugam · Accepted Answer · 2017-05-23 13:31:14

обновление: как 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");
   }); 

Piyush Balapure · Accepted Answer · 2016-09-08 14:38:00

Я создал обобщенное решение. Функция, приведенная ниже, будет изменить идентификаторы и имена клонируемого объекта. В большинстве случаев вам понадобится номер строки, поэтому просто добавьте атрибут "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;
}