Изменить ярлык для атрибута

Question

Я использую функцию JQuery клонировать DIV, который содержит набор входных элементов:

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

Когда DIV получает клонированные тег входных элементов NAME и ID должны быть изменены так что мы можем идентифицировать данные в сценарии на стороне сервера.

У меня есть следующий код, который клонирует DIV и модифицирует ВХОД и ВЫБРАТЬ метки:

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

Однако у меня возникли проблемы, изменяющий LABEL атрибутов. Кто-нибудь знает, как это сделать?

Answer 1

С for - это ключевое слово Javascript, атрибут HTML for отображается в свойстве htmlFor в Javascript.

Однако, вы можете заменить петлю с помощью одного вызова JQuery и избежать этой проблемы:

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

Answer 2

атрибутов тега может быть доступен через функцию .attr().

Answer 3

Я вижу, что у вас уже есть приемлемый ответ на javascript ... но другой способ справиться с этим - это изменить ваш html. Если вы перемещаете вход и выбираете элементы управления внутри метки, вам не нужно будет устанавливать атрибут «для».

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