Modyfikacja etykietę atrybutu

Question

używam funkcji jQuery sklonować DIV, który zawiera zestaw elementów wejściowych:

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

Kiedy ten DIV zostanie sklonowany elementy wejściowe Nazwa i numer znaczniki muszą zostać zmodyfikowane tak że możemy zidentyfikować dane w skrypcie po stronie serwera.

Mam następujący kod, który klonów DIV i modyfikuje INPUT i SELECT tagi:

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

Jednak mam problemy modyfikujący etykiecie atrybutów. Ktoś wie jak to zrobić?

Answer 1

Od for jest słowem kluczowym Javascript, atrybut HTML for jest ujawniony przez właściwość htmlFor w języku JavaScript.

Można jednak wymienić pętlę przez pojedyncze wywołanie jQuery i uniknąć tego problemu:

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

Answer 2

Tag atrybuty mogą być dostępne za pośrednictwem funkcji .attr().

Answer 3

Widzę, że masz już akceptowalną odpowiedź na javascript ... ale innym sposobem poradzenia sobie z tym jest zmiana twojego html. Jeśli przeniesiesz dane wejściowe i zaznaczysz elementy sterujące wewnątrz etykiety, nie musisz naprawiać atrybutu "for".

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