如何修改现有代码克隆Div并同步修改内部元素ID

假设你现有的克隆代码大概是这样（仅修改了外层div的ID）：

$('.add-field').click(function() {
  var lastField = $('.dynamic-field:last');
  var newField = lastField.clone();
  var index = $('.dynamic-field').length + 1;
  newField.attr('id', 'field-' + index);
  newField.insertAfter(lastField);
});

要同步修改内部input的ID和label的for属性，直接在克隆逻辑后补充两段处理代码即可，精准定位对应元素更新属性：

$('.add-field').click(function() {
  var $lastField = $('.dynamic-field:last');
  var $newField = $lastField.clone();
  var index = $('.dynamic-field').length + 1;
  
  // 更新外层div的ID
  $newField.attr('id', 'field-' + index);
  
  // 处理name输入框和对应label
  $newField.find('input[name="name"]')
    .attr('id', 'name-' + index)
    .siblings('label[for^="name-"]')
    .attr('for', 'name-' + index);
  
  // 处理age输入框和对应label
  $newField.find('input[name="age"]')
    .attr('id', 'age-' + index)
    .siblings('label[for^="age-"]')
    .attr('for', 'age-' + index);
  
  $newField.insertAfter($lastField);
});

关键说明： #

• 用find('input[name="name"]')精准定位克隆元素内部的name输入框，避免误改其他无关元素
• 用label[for^="name-"]匹配所有for属性以name-开头的label，不管原序号是多少都能命中目标
• 统一用index序号拼接新的ID和for值，保证input和label的关联完全同步

如果你的label和input不是同级关系（比如label在input的父容器外层），可以把siblings()改成$newField.find('label[for^="name-"]')，同样能生效。

内容的提问来源于stack exchange，提问作者Shafi Asharaf