JS如何为DOM元素添加连续编号并动态修改input的name属性

你的代码存在三个核心问题 #

• 你用的document.querySelector每次只会返回第一个匹配到的input元素，循环全程都在修改同一个元素的name，根本不会遍历到其他input。
• 你直接拿父元素#items的子元素总数作为计数基准，如果父容器里还有除了目标input之外的其他元素，计数会直接出错，应该直接筛选所有需要修改的input元素再处理。
• 额外声明numChildren数组存序号完全是冗余操作，循环下标加1就能直接当序号用。

修复后的可用代码 #

function resetInputNames() {
    // 筛选出#items下所有需要改name的input元素
    const targetInputs = document.querySelectorAll("#items input[name*='item_name_']");
    // 遍历元素直接按顺序赋值name
    targetInputs.forEach((input, index) => {
        input.name = `item_name_${index + 1}`;
    });
}

使用方式 #

每次你完成元素新增、删除操作后直接调用resetInputNames()即可，函数会自动统计符合条件的input总数，按顺序给所有元素重编name属性，不需要你单独维护计数变量。

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