獲取JavaScript中輸入元素的索引

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，則使用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);
}}