Элемент списка клонирования с кнопкой

Question

Есть небольшая проблема с функциональностью jQuery clone ().В основном у меня есть список:

<ul id="portfolio">
 <li id=1><button class="save">content...</button></li>
 <li id=2><button class="save">content...</button></li>
 <li id=3><button class="save">content...</button></li>
 <li id=4><button class="save">content...</button></li>
 <li id=5><button class="save">content...</button></li>
</ul>

, и я хочу клонировать содержимое определенного списка всякий раз, когда пользователь нажимает на кнопку «Сохранить».Пока у меня есть этот jQuery:

$('.save').click(function() {
 var id = 1;
 $('#portfolio li').each(
  function() { 
    $(this).attr('id', 'id' + id++); 
 });
 $('#id1').clone().appendTo('#drop');
});

Этот код позволяет пользователю клонировать # id1, так что это начало.Но как я могу получить функциональность, которую я ищу?

Спасибо!

Answer 1

Вы нацелены на кнопку сохранения и клонируете родителя.

$('.save').click(function() { $(this).parent('li').clone().appendTo('#drop'); });

Вот пример

Важное примечание: Вы должны изменить идентификатор элемента клонов, чтобы не было никаких столкновений!

Answer 2

Я думаю, это то, что вы ищете:

$(document).ready(function(){
    $('#save').click(function(){
      var count = parseInt($('#portfolio').val());
      var newHTML = [];
      for(var i=0;i<count+1;i++){
        newHTML.push('<ul id=' + count+i ' +'><button class="save">content....</button>');
      }
      $('#portfolio').html(newHTML.join(''));
    });
});

Именно ul и li делают его еще более трудным, чем должно быть.Это намного проще, если вы используете, а затем в коде сделать 'id ='.