本文详解如何使用 jquery 遍历多个同名 class 的 dom 元素，并为每个元素独立绑定 pikaday 日历实例，避免作用域混淆与 dom 方法误用，确保选中日期能准确回填至对应 div。
本文详解如何使用 jquery 遍历多个同名 class 的 dom 元素，并为每个元素独立绑定 pikaday 日历实例，避免作用域混淆与 dom 方法误用，确保选中日期能准确回填至对应 div。
在实际开发中，我们常需为一组结构相似的表单区域（如多条记录行）动态挂载日期选择器。Pikaday 本身不支持批量初始化，必须为每个目标
单独创建实例。关键在于：每次回调中正确捕获当前 DOM 元素上下文，并在 onSelect 中精准更新该元素内容。
以下为推荐实现方案（已修复原始代码中的核心问题）：
$('.main_records').each(function() {
const $currentDiv = $(this); // 使用 jQuery 包装当前 DOM 元素，便于后续操作
const picker = new Pikaday({
field: this, // 必须传入原生 DOM 元素（非 jQuery 对象）
numberOfMonths: 2,
mainCalendar: 'right',
onSelect: function(date) {
const formattedDate = moment(date).format('MM/DD/YYYY');
console.log('Selected date:', formattedDate);
$currentDiv.html(formattedDate); // ✅ 正确更新当前 div 内容
}
});
});
⚠️ 注意事项：
- 禁止使用 document.getElementsByClass：该方法不存在（应为 getElementsByClassName），且返回的是只读 NodeList，无法直接赋值 innerHTML；改用 jQuery 对象调用 .html() 更安全、语义清晰。
- onSelect 回调中的 this 不指向当前 div：Pikaday 内部会改变 this 绑定，因此必须在 each 循环内提前缓存 $(this)，否则 onSelect 中无法访问当前元素。
- field 选项必须是原生 DOM 元素：不能传入 $(this)[0] 以外的 jQuery 对象或字符串选择器，否则 Pikaday 初始化失败。
- 若需清空日期或支持输入编辑，建议将 改为 ，并配合 setDate(null) 和 toString() 方法实现双向控制。
通过上述写法，每个 .main_records 元素都将拥有独立的日历实例，互不干扰，且选中日期仅影响自身内容——这是构建可复用、可扩展日期交互组件的基础实践。
