哪个元素索引触发了输入事件?

Question

我有一个选择器，选择多个输入与给定的ID。我有一个输入事件，当其中一个输入发生变化时触发。我想检查哪个输入索引位置触发了输入事件。我猜它们将被堆叠，或者在我的情况下，它们将是存储在数组中的id列表。

var getsIds $("#nameInput");
$(getsIds).on('input', function()){
//which event index from getsIds has triggered the input event 
}

其中#nameInput是视图中生成的输入列表，它们都共享相同的id:

foreach(var items in Model){
<input type="text" id="nameInput" value="@items.name" >
}

底线是我想对触发事件的输入设置验证，使它们具有相同的id。当它们共享相同的id时，我如何检查哪个输入触发了事件?

Answer 1

ID应该是唯一的,只有一个页面上的元素应该有一个ID。当您使用$('#nameInput')来选择它们时，它将只选择第一个，因为jQuery预计只有一个元素具有该ID。

你可以添加一个类名:

<input type="text" id="nameInput1" class='nameInput' value="1" >
<input type="text" id="nameInput2" class='nameInput' value="2" >
<input type="text" id="nameInput3" class='nameInput' value="3" >
<input type="text" id="nameInput4" class='nameInput' value="4" >
<input type="text" id="nameInput5" class='nameInput' value="5" >

然后您可以全部选中它们，并使用父元素中的ID或索引(假设它们都在同一个父元素中)来识别哪些被更改了。侦听器中的this将引用刚刚更改的HTML元素，$(this)将将该元素更改为要操作的jQuery对象。

var getsIds = $(".nameInput");
$(getsIds).on('input', function(){
console.log($(this).attr('id'));
console.log($(this).index());
});

https://jsfiddle.net/yLdqhv8a/