如何為克隆的HTML元素分配新的唯一ID？

Question

我正在處理的項目需要格式，如果用戶自己需要，其文本區域也需要復制。 單擊按鈕選擇器#AddAnswer時，該元素將被克隆並附加到#mp 。 我一直在嘗試使用以下JQuery代碼分配ID：

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

不幸的是，這僅在選擇器“ #line”后面分配數字10。 有人可以幫我稍微調整一下此代碼，以便在克隆元素時ID只是增加1嗎？

Answer 1

試試下面的代碼：

//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 2

我將根據您已經擁有的元素數量生成一個新索引

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