jQuery-无法更改我的元素的ID

克隆元素时,我试图更改元素的ID,基本上,我会保留一个计数器,该计数器会在每次克隆时在ID的末尾递增并添加.似乎很简单.

var addAnswerFlag = true;
function addAnswer(button)
{
    //flag to keep clicks from chaining
    if(addAnswerFlag)
    {
        addAnswerFlag = false;
        $('#answer_warning').fadeOut(600);
        $('.template').clone().attr('id','').insertAfter($('.template')).fadeIn(300,function() {

            $(this).removeClass('template'); 
            addAnswerFlag = true;

            $('.answer_li:not(.template)').each(function(index){
                ++index;

                $(this).children('.answer').each(function(){
                    $(this).attr('id',$(this).attr('id').replace("__","_"+index+"_")).attr('name',$(this).attr('name').replace("__","_"+index+"_"));         
                });

            });

        });

    }
}

抱歉,如果我的代码不清楚.

基本上,我的第一个循环遍历了所有列表元素(带有伪数据的模板元素除外),并接受每个“ .answer”,并将双下划线“ __”替换为“ i”,其中i是计数器.

由于某种原因,我始终为1.我知道每个列表项的值都会增加,因为如果我在尝试重新分配ID之前和之后提醒其值,则该值会上升,但在实际分配中它始终为1.

这是我非常困惑的地方.任何帮助,将不胜感激 ：)

编辑：

这是一些HTML.基本上,我在这里遍历列表项,并更改输入的ID和名称,以便在提交输入后就可以对其进行处理：

<ul id="answers">
    <li style="" class="answer_li template">
        <input id="question__en" name="question_[en]" class="answer" value="" type="text">
        <input id="question__fr" name="question_[fr]" class="answer" value="" type="text">              
    </li>
    <li id="" style="display: list-item;" class="answer_li">
        <input id="question_1_en" name="question_[en]" class="answer" value="" type="text">
        <input id="question_1_fr" name="question_[fr]" class="answer" value="" type="text">             
    </li>
</ul>

如您所见,第一个是我的模板,第二个在下划线之间添加了索引.但是,当我克隆模板时,它们都获得相同的索引.我真的不明白,因为如果我警告该值正确地增加了,我就很困惑,以至于我回到了基本的JavaScript教程中,看看是否缺少某种偶然使用的运算符：)

我还发布了单击按钮(作为参数传递)时调用的整个javascript函数.

最佳答案

每个函数将提供索引(从零开始),因此无需保留单独的变量.请注意,索引将是每次迭代的新值,因此您无需推理闭包是否正确.

$('.answer_li:not(.template)').each( function(index){
    ++index; // to get one-based values
    $(this).children('.answer').each( function(){
        $(this).attr('id',"_"+index+"_"));         
    });
});