獲取組中特定 div 的索引值

Question

我正在創建一組具有單獨內容的<div> ：

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

當<div>應用了某個類（例如， 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

您可以選擇具有container類的元素並遍歷其所有子元素，然后獲取className 包含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並隨后過濾元素列表：

 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

您正在迭代item而不是 for 循環中的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>