本文详解如何用 jQuery 正确遍历并顺序更新多个同类型 input 元素的 value 值，纠正初学者对 .closest() 的误用，提供可直接运行的解决方案与关键注意事项。

本文详解如何用 jquery 正确遍历并顺序更新多个同类型 input 元素的 value 值，纠正初学者对 `.closest()` 的误用，提供可直接运行的解决方案与关键注意事项。

在 JavaScript（尤其是 jQuery）开发中，一个常见需求是：点击按钮后，将页面中一组 元素的 value 按自然数序列（如 1, 2, 3, 4, 5）重新赋值。但初学者常因 DOM 遍历逻辑错误导致操作失败——例如误用 .closest('.number')，试图从按钮向上查找 .number 元素。而实际上，.number 输入框与按钮是平级兄弟节点，并非其祖先，因此 .closest() 将始终返回空集合，循环无效。

✅ 正确做法是直接选取目标元素集合，再通过索引动态赋值。以下是优化后的完整实现：

jQuery 1.12.4

jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

下载

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="btn">Sort</div>

<input type="text" class="number" data-id="1" value="1">
<input type="text" class="number" data-id="5" value="5">
<input type="text" class="number" data-id="4" value="4">
<input type="text" class="number" data-id="3" value="2">
<input type="text" class="number" data-id="2" value="3">

$('.btn').on('click', function() {
  $('.number').each(function(index) {
    $(this).val(index + 1); // index 从 0 开始 → 赋值为 1, 2, 3, 4, 5
  });
});

? 关键说明与注意事项：

• ✅ .each() 是 jQuery 遍历集合的标准方式，回调函数接收两个参数：index（当前元素索引）和 element（原生 DOM 节点），推荐使用 $(this) 操作 jQuery 对象；
• ❌ 避免使用 .closest('.number')：它只向上搜索父级、祖父级等祖先节点，不适用于同级或子级元素；若需反向定位，应考虑 .siblings()、.find() 或直接 CSS 选择器；
• ⚠️ 确保 DOM 加载完成后再绑定事件（推荐将脚本置于