在javascript中获取input元素的索引

Question

如果我在网页上有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);
}

任何帮助将不胜感激！

Answer 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')元素索引的数字

Answer 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);
}}