更改标签以匹配 ID 中的数字部分

Question

我有这个 HTML 代码：

<div id="wrapper">
  <div class="row">
    <label for="additional_1">Additional #1 :</label>
    <input type="text" id="additional_1" name="pnr_remarks_modify[additional][]">
    <a href="#" class="addInput">New</a> - <a href="#" class="removeInput">Remove</a>
  </div>
</div>

我正在使用以下代码添加（克隆）/删除完整的“.row”元素：

var cloneCntr = 2;
$('#wrapper').on('click', '.addInput', function() {
  // clone the div
  var row = $(".row").last();
  var clone = row.clone();

  // change all id and name values to a new unique value
  $("*", clone).add(clone).each(function() {
    if (this.id) {
      this.id = (this.id).slice(0, -1) + cloneCntr;
    }
    if (this.name) {
      this.name = this.name;
    }
  });
  ++cloneCntr;
  $('#wrapper').append(clone);
});

$('#wrapper').on('click', '.removeInput', function(e) {
  e.preventDefault();
  var target = $(e.currentTarget);
  target.parent().remove();
})

每次单击 New 时，我都会从上一个对象获得一个克隆，但会更改其 ID。例如：

首先点击新建

附加#1：新建 - 删除

第二次点击新建

附加#1：新建 - 删除

但如您所见，for 属性和标签文本保持不变。我需要将它们更改为（在每个新克隆上）：

for需要和新ID一样
标签文字需要Additional # + cloneCntr

但是我不知道如何实现这部分，我能得到一些帮助吗？

Here is 我正在玩的 jsFiddle

Answer 1

您可以使用另一个函数生成带有新 id 和 for 属性的 html，如下所示。

function getRow(index){
    return '<div class="row">' +
                '<label for="additional_'+index+'">Additional #'+index+' :</label>' +
                '<input type="text" id="additional_' + index + '" name="pnr_remarks_modify[additional][]">' +
                '<a href="#" class="addInput">New</a> - <a href="#" class="removeInput">Remove</a>' +
           '</div>';
}

var cloneCntr = 2;
$('#wrapper').on('click', '.addInput', function () {
    var clone = getRow(cloneCntr);

    ++cloneCntr;
    $('#wrapper').append(clone);
});

DEMO

Answer 2

您可以在每次添加或删除行时循环遍历所有行，并根据行索引进行更新。使用一个在两个事件处理程序中调用的函数

$('#wrapper').on('click', '.addInput', function() {
  var clone = $(".row").last().clone();
  clone.find('input').val(''); // clear value on clone input
  $('#wrapper').append(clone);
  updateCounts();
});

$('#wrapper').on('click', '.removeInput', function(e) {
  e.preventDefault();
  var target = $(e.currentTarget);
  target.parent().remove();
  updateCounts();
});


function updateCounts() {
  $('#wrapper .row').each(function(i) {
    var num = i + 1,
      $row = $(this),
      inputId = 'additional_' + num;

    $row.find('label').text('Additional #' + num + ' :').attr('for', inputId);
    $row.find('input').attr('id', inputId)
  });

}

DEMO

更改标签以匹配 ID 中的数字部分

Change label to match numeric part from ID

javascript

jquery

clone

DEMO