本文讲解如何正确使用 jQuery 遍历并重置多个同类型 input 元素的 value 值为连续递增序列（如 1, 2, 3…），纠正初学者对 .closest() 的误用，并提供简洁可靠的 .each() 替代方案。
本文讲解如何正确使用 jquery 遍历并重置多个同类型 input 元素的 value 值为连续递增序列（如 1, 2, 3…），纠正初学者对 `.closest()` 的误用，并提供简洁可靠的 `.each()` 替代方案。
在 JavaScript（尤其是 jQuery）初学实践中，一个常见误区是混淆 DOM 查找方法的语义。例如，原代码中使用 $(this).closest('.number') 试图定位目标 input 元素，但 .closest() 的作用是向上遍历祖先节点，查找第一个匹配的选择器元素。而本例中，.btn 与所有 .number input 并非父子/祖孙关系——它们是同级兄弟节点（甚至 .btn 在 .number 之前），因此 .closest('.number') 永远返回空集合，导致循环反复操作同一个（不存在的）元素，最终仅最后一个赋值生效，且无法按预期批量更新。
要实现“点击按钮后，将所有 .number 输入框的 value 按 DOM 顺序依次设为 1, 2, 3, 4, 5”，核心在于：准确选取目标元素集合，并按序遍历赋值。推荐使用 jQuery 的 .each() 方法，它天然提供当前元素索引（从 0 开始），配合 i + 1 即可生成所需序列：
$('.btn').on('click', function() {
$('.number').each(function(i) {
$(this).val(i + 1);
});
});✅ 此方案优势明显：
- 语义清晰：$('.number') 直接选取全部目标 input，无歧义；
- 顺序可靠：jQuery 的 .each() 按 HTML 中的 DOM 出现顺序遍历，与视觉/结构顺序一致；
- 简洁高效：无需手动维护计数器 i，避免 while 循环易错点（如忘记自增、越界等）；
- 兼容性强：适用于任意数量的 .number 元素，无需硬编码上限。
⚠️ 注意事项：
立即学习“Java免费学习笔记（深入）”；
- 确保 jQuery 已正确加载（如使用 CDN <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>）；
- 若需支持动态添加的 .number 元素，应改用事件委托（如 $(document).on('click', '.btn', ...)）；
- val() 设置的是 input 的当前值（value 属性），若需同步更新 value HTML 属性（如后续通过 getAttribute('value') 读取），可补充 $(this).attr('value', i + 1)，但通常仅 val() 即可满足表单提交需求。
总结：解决此类批量 DOM 更新问题，关键在于选择正确的元素查找方式（$('.selector') 而非错误的 .closest()）和迭代机制（.each() 优于手动 while）。掌握这一模式，可快速迁移至排序、编号、状态批量切换等实际场景。
