如何遍历表单中具有相同类名的克隆输入元素？

嘿，这个问题我太熟悉了！要遍历这些克隆出来的同类别输入元素，其实有几种实用的JavaScript方案，我给你一步步拆解：

方法一：一次性选中所有同类别元素 #

如果你不需要区分输入框属于哪个pblock容器，只想批量处理所有同类别（比如.fz-1）的输入框，直接用document.querySelectorAll()就能搞定：

// 获取所有带.fz-1类的输入元素
const allFz1Inputs = document.querySelectorAll('input.fz-1');

// 遍历每一个元素做操作
allFz1Inputs.forEach(input => {
  // 示例：打印输入框的值
  console.log('当前.fz-1输入值：', input.value);
  // 这里可以替换成你的业务逻辑，比如验证、赋值等
});

这个方法最直接，适合只关注同类别元素，不关心分组的场景。

方法二：按pblock分组遍历 #

如果你需要关联每个pblock容器里的多个输入框（比如要把同一组的.fz-1、.fz-2、.fz-3的值对应起来处理），可以先遍历所有pblock，再在每个容器内定位输入元素：

// 获取所有pblock容器
const allPblocks = document.querySelectorAll('.pblock');

allPblocks.forEach((pblock, index) => {
  // 在当前pblock里精准查找对应的输入框
  const fz1Input = pblock.querySelector('input.fz-1');
  const fz2Input = pblock.querySelector('input.fz-2');
  const fz3Input = pblock.querySelector('input.fz-3');

  // 确保元素存在再处理（避免克隆时可能的异常）
  if (fz1Input && fz2Input && fz3Input) {
    console.log(`第${index+1}组输入值：`, fz1Input.value, fz2Input.value, fz3Input.value);
    // 这里可以做分组相关的逻辑，比如提交一组数据
  }
});

这种方式能保证你处理的是同一个pblock里的配套输入框，不会跨组混乱。

方法三：动态遍历多类别元素 #

如果你的输入框类名是按规律命名的（比如.fz-1、.fz-2....fz-n），还可以用动态生成选择器的方式批量处理：

// 定义所有需要处理的输入类名
const inputClassList = ['fz-1', 'fz-2', 'fz-3'];

inputClassList.forEach(className => {
  const targetInputs = document.querySelectorAll(`input.${className}`);
  console.log(`===== 处理所有.${className}元素 =====`);
  targetInputs.forEach((input, idx) => {
    console.log(`第${idx+1}个${className}值：`, input.value);
  });
});

这种方案扩展性很强，哪怕后续新增更多类别的输入框，只要把类名加到数组里就行，不用改遍历逻辑。

小提醒 #

• 克隆pblock时要确保输入框的类名没有被意外修改，否则选择器会失效；
• 以上方法都支持动态DOM（克隆后的元素），因为querySelectorAll是实时查询当前DOM结构的。

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