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


127

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

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

Ответы:


211

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


Зашифрованные элементы, получить наивысший идентификатор

Допустим, у вас есть много элементов с такими идентификаторами, как, klon--5но зашифрованные (не по порядку). Здесь мы не можем пойти :lastили :first, поэтому нам нужен механизм для получения наивысшего идентификатора:

const $all = $('[id^="klon--"]');
const maxID = Math.max.apply(Math, $all.map((i, el) => +el.id.match(/\d+$/g)[0]).get());
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>

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>


2
+1 за рабочую демонстрацию :) и спасибо, что просмотрели мой ответ. Я обновил пост, также добавил рабочую демонстрацию jsfiddle.net/HGtmR/4
Selvakumar Arumugam

Можно ли также иметь кнопку внутри div, которая удаляет текущий идентификатор div?
user1324780

1
@ user1324780 Да, это возможно, но вы должны опубликовать это как новый вопрос. В любом случае ключ заключается в том, чтобы найти .closest(div[id^=id])и .removeэтот div.
Сельвакумар Арумугам

1
идеально подходит для моей потребности. Скорее всего, это сэкономило мне часы разработки! спасибо
Николас Манзини

43

Обновление: Как отметил Роко Булиян .. вам нужно использовать .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");
   }); 

18
Вы упустили прекрасную возможность использовать 'id'+ ++ idв своем коде.
Blazemonger

@ RokoC.Buljan Вы правы, но вопрос заключался в том, как изменить атрибут клонированного элемента, поэтому я не заметил .after. См. Обновленный ответ.
Сельвакумар Арумугам,

:) +1, чтобы округлить до 5! ;) Хорошее использование [id^=id]:lastПоздравления.
Роко С. Бульян

можно ли это применить и к именам?
Optiq

5

Это самое простое решение, работающее для меня.

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

2

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

2

Это тоже работает

 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>


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 (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>
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.