如何为克隆的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;
            });