获取组中特定 div 的索引值

Question

我正在创建一组具有不同内容的 <div>：

<div class="container">
  <div class="container__item"></div>
  <div class="container__item"></div>
  <div class="container__item myClass"></div>
</div>

当<div>应用了某个class（例如myClass）

时，我需要能够得到它的特定索引值

const item = document.querySelector(".container__item");
const items = document.querySelectorAll(".container__item");
const myClass = document.querySelector(".myClass");

我正在遍历项目集合但无法获取索引值，例如 0, 1, 2。仅供参考，我会将这些值转换为 1, 2, 3.

for (var i = 0; i < item.length; i++) {
  var hasClass = item[i]classList.contains(showItem);
  if (hasClass) {
    console.log(i);
  }
}

Answer 1

您可以 select 带有 container class 的元素并遍历其所有 children and then grab the index of those children where the className includes myClass.

const container = document.querySelector(".container");

Array.from(container.children).forEach((c, i) => {
  if (c.className.includes("myClass")) {
    console.log(i + 1);
  }
});

<div class="container">
  <div class="container__item"></div>
  <div class="container__item myClass"></div>
  <div class="container__item"></div>
  <div class="container__item myClass"></div>
  <div class="container__item"></div>
  <div class="container__item"></div>
  <div class="container__item myClass"></div>
</div>

也可以使用Element.classList，如下图：

const container = document.querySelector(".container");

Array.from(container.children).forEach((c, i) => {
  if (c.classList.contains("myClass")) {
    console.log(i + 1);
  }
});

<div class="container">
  <div class="container__item"></div>
  <div class="container__item myClass"></div>
  <div class="container__item"></div>
  <div class="container__item myClass"></div>
  <div class="container__item"></div>
  <div class="container__item"></div>
  <div class="container__item myClass"></div>
</div>

Answer 2

您可以使用map and subsequently filter元素列表：

const myClassElementsWithIndexes = 
  [...document.querySelectorAll(`.container .container__item`)]
    .map( (item, i) => ({elem: item, index: i}) )
    .filter(item => item.elem.classList.contains(`myClass`) );

console.log(myClassElementsWithIndexes);

<div class="container">
  <div class="container__item"></div>
  <div class="container__item"></div>
  <div class="container__item myClass"></div>
</div>

Answer 3

您在 for 循环中迭代 item 而不是 items。我添加了一些 ID 只是为了调试给你看。在访问 classList 之前，您还缺少索引 [i] 之后的句点。

let items = document.querySelectorAll(".container__item");

for ( var i = 0; i < items.length; i++) {
    console.log( items[i].id );
  
  var hasClass = items[i].classList.contains('myClass');
  if (hasClass) {
    console.log('Index: ' + i);
  }
}

<div class="container">
  <div class="container__item" id="div1"></div>
  <div class="container__item" id="div2"></div>
  <div class="container__item myClass" id="div3"></div>
</div>

获取组中特定 div 的索引值

Getting the index value of a specific div in a group

javascript

for-loop

foreach