克隆多代表表单元素后，如何修改w-input类输入框的ID与name？

嘿，我来帮你搞定这个困扰！你说已经能修改heading-reference的属性，但同属.w-input类的输入框搞不定，大概率是选择器的上下文没找对——你可能不小心选中了页面上所有的.w-input，或者没精准定位到刚克隆出来的那组元素里的输入框。

咱直接上可行的代码方案，结合你的需求一步步来：

核心思路 #

1. 先统计当前已有的代表字段组数，生成唯一的索引（比如第1组、第2组），用来给新元素的id/name加后缀
2. 克隆原始字段组时，要针对刚克隆出来的新组，单独修改它内部的所有元素属性
3. 遍历新组内的.w-input输入框，逐个修改id和name

完整代码示例 #

假设你的原始代表字段组有一个统一的容器类representative-group，点击按钮的逻辑如下：

$('#addbtn').click(function() {
  // 统计当前已有的组数，新组的索引就是现有数量+1
  const groupIndex = $('.representative-group').length + 1;
  
  // 克隆第一组原始字段，true表示连绑定的事件一起克隆（如果你的输入框有事件的话）
  const newRepresentativeGroup = $('.representative-group:first').clone(true);
  
  // 先处理你已经搞定的heading-reference
  newRepresentativeGroup.find('.heading-reference').attr({
    id: `heading-reference-${groupIndex}`,
    name: `heading-reference-${groupIndex}`
  });
  
  // 重点：处理组内所有.w-input输入框
  newRepresentativeGroup.find('.w-input').each(function() {
    // 获取原始的id/name前缀（比如原始是"rep-phone"，去掉可能已有的数字后缀）
    const originalId = $(this).attr('id').replace(/-\d+$/, '');
    const originalName = $(this).attr('name').replace(/-\d+$/, '');
    
    // 重新设置id和name，加上组索引后缀
    $(this).attr({
      id: `${originalId}-${groupIndex}`,
      name: `${originalName}-${groupIndex}`
    });
    
    // 贴心小细节：清空输入框内容，避免克隆旧数据
    $(this).val('');
  });
  
  // 把新组添加到页面上（比如放到最后一组的后面）
  $('.representative-group:last').after(newRepresentativeGroup);
});

关键注意点 #

• 一定要用newRepresentativeGroup.find('.w-input')：这个是限定只在刚克隆的新组里找输入框，而不是全局搜索，不然会把所有旧的输入框属性也改掉
• 处理原始属性的后缀：用正则replace(/-\d+$/, '')去掉可能已经存在的数字后缀，保证每次克隆的命名格式统一（比如原始是rep-name，克隆后变成rep-name-2、rep-name-3）
• 克隆时的true参数：如果你的输入框绑定了事件（比如校验、联动），一定要加true，不然克隆后的输入框会丢失事件；如果没有事件，可以省略
• 检查选择器正确性：确认你的输入框确实有.w-input类，class名没有拼写错误

如果还是不行，你可以打开浏览器控制台，用console.log(newRepresentativeGroup.find('.w-input'))看看能不能找到元素，排查下是不是选择器或者DOM结构的问题。

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