Question

I’m trying to change the id of my elements when I clone an element, basically I keep a counter that I increment and add it at the end of the id each time it’s cloned. Seems simple enough.

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+"_"));         
                });

            });

        });

    }
}

Sorry if my code is a little unclear.

Basically my first loop goes through all my list elements (except for the template one with dummy data) and takes each ‘.answer’ and replaces the double underscore “__” for “i” where i is a counter.

For some dang reason i is always 1. I know the value increments for each list item because if I alert its value before and after I attempt the reassigning of the id the value goes up but in the actual assignment it is always 1.

This is where I get extremely confused. Any help would be appreciated 🙂

Edit:

Here’s some HTML. Basically I’m looping through my list items here and changing the IDs and names of my inputs so I can handle them once they are submitted:

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

As you can see the first one is my template and the second has the index added between the underscores. However as I clone the template they all get the same index. I really don’t understand because if I alert the value it’s incremented correctly, I was so confused that I went back into basic javascript tutorial to see if I was missing some sort of operator that I was using by accident 🙂

I also posted the whole javascript function that gets called when I click on a button (which I pass as a parameter).

Answer 1

The each function will supply the index (zero-based) so there’s no need to keep a separate variable. Note that index will be a fresh value for each iteration, so you don’t need to reason about whether the closure is correct or not.

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