Question

我正在研究的项目需要一种形式，如果用户他/她自己需要，则需要复制其textareas。当单击按钮，选择器 #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只增加一个吗？

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按钮时，都会向控件添加一个textarea。

如果您想一次添加多个，请尝试以下操作：

//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;
            });

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

3 个答案: