本文详解如何用 jQuery 正确遍历并顺序更新多个同类型 input 元素的 value 值，纠正初学者对 .closest() 的误用，提供可直接运行的解决方案与关键注意事项。
本文详解如何用 jquery 正确遍历并顺序更新多个同类型 input 元素的 value 值，纠正初学者对 `.closest()` 的误用，提供可直接运行的解决方案与关键注意事项。
在 JavaScript（尤其是 jQuery）开发中，一个常见需求是：点击按钮后，将页面中一组 元素的 value 按自然数序列（如 1, 2, 3, 4, 5）重新赋值。但初学者常因 DOM 遍历逻辑错误导致操作失败——例如误用 .closest('.number')，试图从按钮向上查找 .number 元素。而实际上，.number 输入框与按钮是平级兄弟节点，并非其祖先，因此 .closest() 将始终返回空集合，循环无效。
✅ 正确做法是直接选取目标元素集合，再通过索引动态赋值。以下是优化后的完整实现：
动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版
下载
动态WEB网站中的PHP和MySQL详细反映实际程序的需求，仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法，让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能，对常用的、强大的包
<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 加载完成后再绑定事件（推荐将脚本置于
