在javascript中获取输入元素的索引答案

【问题标题】：get index of input element in javascript在javascript中获取输入元素的索引
【发布时间】：2015-03-28 17:23:14
【问题描述】：

如果我在一个网页上有 3 个输入框并且用户点击了第二个输入，我需要获取输入索引，即输入在页面上的位置。我需要它在纯javascript中。这是我到目前为止所拥有的，但它不起作用......

 document.querySelector('html').onclick = function (e) {
    log(e);
}

function log(obj) {
    var nodeName = obj.target.nodeName
    var idx = nodeName.length
    console.log(nodeName, idx);
}

任何帮助将不胜感激！

【问题讨论】：

“不起作用”没有提供任何信息。您需要实际描述问题以获得可能的最佳帮助。您应该解释为什么您在网上搜索的内容没有帮助，以及您为解决该问题所做的尝试。
您应该更清楚自己在寻找什么。显示一个包含多个 input 元素的最小 html 示例，并显示您期望这些元素的索引值。
position 是什么意思？更清楚。您是在谈论顶部和左侧的像素还是相对于之前输入元素的索引（元素编号）？
如果用户点击第二个输入，那么它应该返回 2，或者如果它从零开始，则返回 1。索引将仅用于整个文档的选定输入。
这已经有答案了stackoverflow.com/questions/8801787/…

标签： javascript html

【解决方案1】：

纯javascript：

function getIndexFromSet(set, elm){
    var setArr = [].slice.call(set);
    for( var i in setArr )
       if( setArr[i] == elm )
         return i;      
}

上面的函数可以这样使用：

function checkInputFocus(e){
  if(e.target && e.target.nodeName == 'input' )
    index = getIndexFromSet(inputs, e.target);
}

var inputs = document.querySelectorAll('input');
document.addEventListener("click", checkInputFocus);

使用 jQuery，如果你在这个页面上运行它（在你的控制台中）

var inputs = $('input'); // get all input elements on the page
inputs.index( $('#save-pinned-sites-btn') ); // find the index of spesific one

你会得到一个代表$('#save-pinned-sites-btn')元素索引的数字

【讨论】：

vsync，id、类或名称未知，所以我不能在选择器上使用 for 循环。
@Rob，我已经更新了我的答案，所以你可以用 this 指向输入字段来调用函数，当它被聚焦时
感谢 vsync，对这个 var index = getIndexFromSet(document.querySelectorAll('input'), obj.target);效果很好！
我已经更新了关于如何将它与委派的 click 事件监听器一起使用的答案（以获得更好的性能）

【解决方案2】：

内联：

<input onclick="for(i=0;i<this.parentNode.getElementsByTagName('input').length;i++){if(this==this.parentNode.getElementsByTagName('input')[i]){alert(i);}}">

或者改成

onclick="show_index(this)"

并添加：

function show_index(which) {
for(i=0;i<which.parentNode.getElementsByTagName('input').length;i++){
if(which==which.parentNode.getElementsByTagName('input')[i]){
alert(i);
}}

【讨论】：