多个同ID输入框触发input事件时如何获取触发元素的索引位置？

注：HTML标准明确要求页面内ID属性必须唯一，重复ID属于不规范写法，可能导致其他DOM操作异常，以下方案仅适配你必须保留相同ID配置的场景。

你可以直接通过事件回调的this指向结合jQuery的index()方法获取触发元素的索引：

• 事件回调函数中的this天然指向触发本次事件的原生输入框DOM元素
• 调用预先选中的元素集合的index()方法，传入当前触发元素即可得到对应索引，该索引和你渲染时循环的顺序完全一致，和服务端Model数组的索引一一对应

可用代码示例 #

// 选中所有id为nameInput的输入框
var getsIds = $("#nameInput");

getsIds.on('input', function() {
  // 直接获取当前触发元素在集合中的索引
  var currentIndex = getsIds.index(this);
  // 获取当前输入框的值用于校验
  var inputValue = $(this).val();

  // 此处书写对应索引输入框的校验逻辑即可
  console.log(`第${currentIndex}个输入框触发事件，值为：${inputValue}`);
});

如果后续可以调整代码规范，建议将重复的id属性替换为class属性，避免出现其他潜在的选择器匹配异常。

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