单击该元素时如何使用javascript获取HTML集合中元素的索引答案

【问题标题】：How to get the index of an element in a HTML collection when that element is clicked, using javascript单击该元素时如何使用javascript获取HTML集合中元素的索引
【发布时间】：2021-04-15 14:11:06
【问题描述】：

我的 HTML 文件中有五个按钮。

看到它们是五个，我希望能够打印在 HTML 集合中单击的特定按钮的索引。即点击btn 4 我应该看到3 打印出来。我尝试将一些我认为可以做到但徒劳无功的 javascript 行放在一起。 JS代码为：

if (document.readyState == 'loading') {
        document.addEventListener('DOMContentLoaded',execute);
    }else{
        execute()
    }
    function execute() {
        var btns = document.getElementsByClassName('item');
        for (var i = 0; i < btns.length; i++) {
            btns[i].addEventListener('click',btnClicked);
        }       
    }
    function btnClicked(event,btns) {
        var btn = event.currentTarget;
        var btnIndex = btns.indexOf(btn)
        console.log(btnIndex)
    }

<body>
        <div class="btn-items">
            <button class="item">btn 1 </button>
            <button class="item">btn 2 </button>
            <button class="item">btn 3</button>
            <button class="item">btn 4</button>
            <button class="item">btn 5</button> 
        </div>
    </body>

要走的路是什么？

【问题讨论】：

去掉DOMContentLoaded事件周围的绒毛，只附加事件而不做任何检查。不要迭代实时 HTMLCollection，而是使用数组 (btns = Array.from(document.querySelectorAll('.item'));)。这也将解决您与indexOf 的问题。
查看this answer。即使它是关于 classList 它也适用于 querySelectorAll 的结果

标签： javascript html arrays dom dom-events

【解决方案1】：

为什么不使用

if (document.readyState == 'loading') {
    document.addEventListener('DOMContentLoaded',execute);
}else{
    execute();
}
function execute() {
    const btns = document.getElementsByClassName('item');
    for(let i = 0; i < btns.length; i++){
        btns[i].addEventListener('click',function(){
            console.log('button index : '+i);
        });
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button class="item">button 1</button>
    <button class="item">button 2</button>
    <button class="item">button 3</button>
    <script src="script.js"></script>
</body>
</html>

【讨论】：

【解决方案2】：

您可以使用此解决方案获得所需的输出

function execute() {
    var btns = document.querySelectorAll('.item');
    btns.forEach(btnClicked);
  
}
function btnClicked(btn,index) {
    btn.addEventListener('click',()=>{
       console.log(index)
    });
}

这是一种更简洁的实现方式。

【讨论】：

【解决方案3】：

您可以通过在 HTML 元素上使用 setAttribute 函数为每个按钮赋予自定义属性。然后您只需要使用getAttribute 函数检索此属性的值。请参见下面的代码示例：

var btns = document.getElementsByClassName('item')

for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener('click', btnClicked)
    btns[i].setAttribute('data-index', i)
}

function btnClicked(event) {
   var btn = event.currentTarget;
   console.log(btn.getAttribute('data-index'))
}

<div class="btn-items">
    <button class="item">btn 1 </button>
    <button class="item">btn 2 </button>
    <button class="item">btn 3</button>
    <button class="item">btn 4</button>
    <button class="item">btn 5</button> 
</div>

【讨论】：

【解决方案4】：

通常当您想将相同的事件应用于多个元素时，请尝试使用事件委托。

您所做的基本上是在父 btn-items 上监听事件，这是因为浏览器冒泡事件。

下面是一个示例，请注意，因为您会监听父级上的所有点击，如果您点击按钮之间的间隙，您将获得-1，在一个实际示例中，您可能需要处理此问题。

但是这种方法的优点是有一个事件监听器和一个事件回调。一个非常好的优点是，如果您稍后动态添加.item，它也会自动为这些工作。

const btns = document.querySelector('.btn-items');
btns.addEventListener('click', e => {
  console.log([...btns.children].
    indexOf(e.target));
});

<div class="btn-items">
    <button class="item">btn 1 </button>
    <button class="item">btn 2 </button>
    <button class="item">btn 3</button>
    <button class="item">btn 4</button>
    <button class="item">btn 5</button> 
</div>

【讨论】：

【解决方案5】：

document.getElementsByClassName() 返回一个没有indexOf() 函数的node list。 (see this question)

您可以将i 作为参数传递给btnClicked()。

var btns;
if (document.readyState == 'loading') {
        document.addEventListener('DOMContentLoaded',execute);
    }else{
        execute()
    }
    function execute() {
        btns = document.getElementsByClassName('item');
        for (let i = 0; i < btns.length; i++) {
            btns[i].addEventListener('click',(e)=> btnClicked(e,i));
        }       
    }
    function btnClicked(event,i) {
        
        console.log(i)
    }

【讨论】：