Как назначить новый уникальный идентификатор клонированному элементу HTML?

Question

Проект, над которым я работаю, требует формы, в которой его текстовые области необходимо дублировать, если пользователь сам это требует. Элемент клонируется и добавляется к #mp, когда нажата кнопка, селектор #AddAnswer. Я пытался присвоить идентификаторы с помощью следующего кода JQuery:

$('#AddAnswer').click(
    function() { 
     for(var i=0; i<=10;i++) 
      $clone=$('textarea[name="antwoord"]:first').clone().attr('id', 'list'+i); 
      console.log($clone); 
      $('#mp').append($clone); 
      return false; 
}); 

К сожалению, это только присваивает номер 10 позади селектора «#line». Может ли кто-нибудь помочь мне слегка настроить этот код так, чтобы идентификатор просто увеличивался на единицу как элемент, клонированный?

Answer 1

я бы создать новый индекс, основанный на количестве элементов, которые вы уже имеете

$('#AddAnswer').on("click",function() { 
    var idx = $('textarea[name^="antwoord"]').length+1, 
     $clone = $('textarea[name^="antwoord"]:first').clone().attr('id', 'antwoord_'+idx); 
    $('#mp').append($clone); 
    return false; 
}); 

тест на http://fiddle.jshell.net/Uj5W7/2/

другая возможность будет работать с index()

$('#AddAnswer').on("click",function() { 
    var idx = $('textarea[name^="antwoord"]:last').index()+1, 
     $clone = $('textarea[name^="antwoord"]:first').clone().attr('id', 'antwoord_'+idx); 
    $('#mp').append($clone); 
    return false; 
}); 

тест на http://fiddle.jshell.net/Uj5W7/3/

Answer 2

Попробуйте следующий код:

//Defaults to 1 
var numAnswers = 1; 

$('#AddAnswer').click(function() { 
    //Gets the clone and sets the ID to be list + Number of Answers 
    $clone = $('textarea[name="antwoord"]:first').clone().attr('id', 'list'+numAnswers); 
    console.log($clone); 
    $('#mp').append($clone); 
    //Add 1 to number of answers 
    numAnswers += 1; 

    return false; 
}); 

Это добавит текстовое поле для управления каждый раз, когда кнопка нажата AddAnswer.

Если вы хотите добавить больше чем один в то время, попробуйте следующее:

//Defaults to 1 
var numAnswers = 1; 

$('#AddAnswer').click(function() { 
    var numToAdd = 10; 
    var startNum = numAnswers + 1; 
    var endNum = numToAdd + numAnswers;   

    for(var i=startNum; i <= endNum;i++) { 
     //Gets the clone and sets the ID to be list + current Answer number 
     $clone = $('textarea[name="antwoord"]:first').clone().attr('id', 'list'+i); 
     console.log($clone); 
     $('#mp').append($clone); 
     //Add 1 to number of answers 
     numAnswers += 1;    
    } 
    return false; 
}); 

Второй подход добавляет 10 пунктов, в то время, и добавит к количеству элементов, т.е. первый раз, когда он будет добавлен пункты до 11, а затем пункты до 21 и т.д.

Answer 3

попробовать что-то вроде этого

  $('#AddAnswer').click(function() { 
       for(var i=0; i<=10;i++) 
       { 
        $clone=$('textarea[name="antwoord"]:first').clone().attr('id', 'list'+i); 
        $('#mp').append($clone); 
       } 
       return false; 
      });