Question

I am having difficulty performing a find and replace of attribute values.

Consider this html:

<tr id="rules[0]">
    <td>
        <input id="rules0.isActive1" name="rules[0].isActive" type="checkbox" value="true"/><input type="hidden" name="_rules[0].isActive" value="on"/>
    </td>
    <td>
        <select id="rules0.leftCondition.name" name="rules[0].leftCondition.name">
            ...
        </select>
    </td>

I am looking to update each ‘s name attribute with the appropriate count e.g. rules[0].isActive is updated to rules[10].isActive

I am using this JQuery snippet:

$(newRow).find('[id*="rules"]').each(function(){
    // Update the 'rules[0]' part of the name attribute to contain the latest count 
    this.name.replace('rules\[0\]','rules\[$count\]');
}); 

where newRow is a variable holding the entire block and count holds the latest counter value.
However, when I debug this code it seems that “this.name” is undefined.

Where am I going wrong here?

Thanks

Answer 1

To update attribute of element you should use the .attr function. Also, when using this in jQuery context you must use $(this) syntax. If I understand your intentions so it should be something like that:

$(newRow).find('[id*="rules"]').each(function(){
    // Update the 'rules[0]' part of the name attribute to contain the latest count 
    $(this).attr('name',$(this).attr('name').replace('rules\[0\]','rules\[$count\]'));
});