Question

我试图遍历具有相同类的元素，以查看按钮是否在特定元素内具有特定类。我知道如何在jQuery中完成此操作，但是该项目没有jQuery，因此必须使用香草JS完成...我对此并不熟悉。

    let boardItems = document.getElementsByClassName("item--product");
    for (let i = 0; i < boardItems.length; i++) {
        if(boardItems.children.classList.contains('board-item-selected')){
            console.log(i);
        }
    }

我想要的是获取确实在子级中包含该类的每个项目的索引号。

Answer 1

将HTMLCollection转换为HTMLElement的数组，并解析每个元素的类列表。

let htmlCollection = document.getElementsByClassName("item--product");
let array = [].slice.call(htmlCollection)
    for (let i = 0; i < array.length; i++) {
        if(array[i].classList.contains("board-item-selected")){
          console.log("The index of the board-item-selected: " + i)
        }
    }

<div class="item--product"></div>
<div class="item--product"></div>
<div class="item--product board-item-selected"></div>
<div class="item--product"></div>
<div class="item--product board-item-selected"></div>
<div class="item--product"></div>
<div class="item--product"></div>

Answer 2

您正在访问整个列表，而不是数组。

尝试将第3行更改为if(boardItems[i].classList.contains('board-item-selected')) {

遍历元素并检查香草javascript中的子类是否上课

2 个答案: