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并修改INPUT和SELECT标记：

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 FOR属性。有谁知道怎么做？

Answer 1

由于for是Javascript关键字，因此Javascript中的for属性会公开HTML htmlFor属性。

但是，您可以通过单个jQuery调用替换循环并避免此问题：

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

Answer 2

可以通过.attr（）函数访问标记属性。

Answer 3

我看到你已经有了一个可接受的javascript答案......但你可以通过改变你的html来解决这个问题。如果移动输入并选择标签内的控件，则无需修复“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>

修改标签FOR属性

3 个答案: