Modify a label FOR attribute

I am using a jQuery function to clone a DIV that contains a set of input elements:

<div class="history-form-fields">

<div class="row">
  <label for="History_0_type">Type</label>
  <select name="History[0][type]" id="History_0_type">
  <option value="">Select</option>
  </select>
</div>

<div class="row">
  <label for="History_0_name">Name</label>
  <input type="text" name="History[0][name]" id="History_0_name" />
开发者_Python百科</div>

<div class="row">
  <label for="History_0_year">Year</label>
  <select name="History[0][year]" id="History_0_year">
  <option value="">Select</option>
  </select>
</div>

</div>

<input id="addAnother" type="button" value="Add Another" /> 

When this DIV gets cloned the input elements NAME and ID tags need to be modified so that we can identify the data in the server side script.

I have the following code that clones the DIV and modifies the INPUT and SELECT tags:

var counter = 0;

$('#addAnother').click(function(){
    var divCloned = $('.history-form-fields:first').clone();
    divCloned.insertAfter('.history-form-fields:last');
    initNewInputs(divCloned.children('.row'), ++counter);
});

function initNewInputs(divs, idNumber)
{       
    var inputs = divs.children('input, select').get(); // find all the INPUT and SELECT tags

    for(var i in inputs)
    {
        inputs[i].id = inputs[i].id.replace(/\d+/, idNumber);
        inputs[i].name = inputs[i].name.replace(/\d+/, idNumber);
    }
}

However I am having trouble modifying the LABEL FOR attributes. Anybody know how to do this?

Since for is a Javascript keyword, the HTML for attribute is exposed by the htmlFor property in Javascript.

However, you can replace your loop by a single jQuery call and avoid this issue:

divs.children('label').attr('for',
    function(index, old) { return old.replace(/\d+/, idNumber); }
);

Tag Attributes can be accessed through the .attr() function.

I see that you already have an acceptable javascript answer... but another way you could handle this is by changing your html. If you move the input and select controls inside the label you wouldn't need to fix the "for" attribute.

<div class="history-form-fields">
    <div class="row">
        <label>
            Type
            <select name="History[0][type]" id="History_0_type">
                <option value="">Select</option>
            </select>
        </label>
    </div>
    <div class="row">
        <label>
            Name
            <input type="text" name="History[0][name]" id="History_0_name" />
        </label>
    </div>
    <div class="row">
        <label>
            Year
            <select name="History[0][year]" id="History_0_year">
                <option value="">Select</option>
            </select>
        </label>
    </div>
</div>