javascript - 在 HTMLCollection 中获取具有特定(唯一)类的元素索引

Question

在标题中。

HTML:

<div class="active"></div>
<div></div>
<div></div>

Javascript( Vanilla ):

// source HTML collection, only get the elements index which has the class "active"
let theCollection = document.querySelectorAll('div'); 

// related HTML collection
let anotherCollection = document.querySelectorAll('div .anotherClass');
// adding the class the corresponding element
theCollection[index].classList.add('active');

我需要获取的是当前在 theCollection 中具有 active 类的元素的索引。

Answer 1

为了完成你的任务:

"What I need to get is the index of the element which currently has the active class within theCollection."

您可以遍历 div 并检查哪个 div 具有事件类。请运行代码进行验证。

document.querySelectorAll('div').forEach((item, index) => {
  if (item.classList.contains('active')) {
    document.getElementById('showActiveIndex').textContent = `index is ${index}`;
  }
})

<div>zero</div>
<div>one</div>
<div class="active">two</div>
<div>three</div>
<hr />
<div id="showActiveIndex"></div>