Javascript 如何使用forEach循环获取索引？

我已经试过了

AAAA
bbbbb
ccccc
DDD

const product=document.querySelector（“.product”）；
const productList=product.querySelectorAll（“li”）；
函数getIdx（）{
productList.forEach（（列表，idx）=>{
让productClassList=list.classList；
让parsedList=Array.from（productClassList）；
if（parsedList.includes（“on”））{
返回idx；
}
});
};
函数printIdx（）{
设idx=getIdx（）；
console.log（idx）；//打印未定义
}
productList.forEach（列表=>{
list.addEventListener（“单击”，printIdx）；
});

但它不工作，当我点击li标签的内容时，它总是打印“未定义”

我想在我点击li标签的内容时得到索引，我想像使用网上购物网站一样使用它

---

如何获取索引？

您只需将索引保存在foreach循环之外，如下所示：

const product=document.querySelector（“.product”）；
const productList=product.querySelectorAll（“li”）；
函数getIdx（）{
//持有正确指数的var
设指数=-1；
productList.forEach（（列表，idx）=>{
让productClassList=list.classList；
让parsedList=Array.from（productClassList）；
if（parsedList.includes（“on”））{
//放入我们找到的索引并退出循环
指数=idx；
返回；
}
});
//返回值
收益指数；
};
函数printIdx（）{
设idx=getIdx（）；
console.log（idx）；//打印未定义
}
productList.forEach（列表=>{
list.addEventListener（“单击”，printIdx）；
});

AAAA
bbbbb
ccccc
DDD
您可以简单地使用
for
循环，并使用
classList.contains（）
检查类是否存在。此外，还需要声明一个局部变量，以存储从循环返回的索引


const product=document.querySelector（“.product”）；
const productList=product.querySelectorAll（“li”）；
函数getIdx（）{
让idx；
对于（var i=0；i{
list.addEventListener（“单击”，printIdx）；
});

AAAA
bbbbb
ccccc
DDD
好吧，一种更安全的方法是让所有的
通过类“开”，您可以执行以下操作：


[…document.queryselectoral（“.product li”）]
.减少（（a，li，i）=>{
li.onclick=（）=>console.log（a）；
li.classList.contains（“on”）和&a.push（i）
归还
},[]);

将不选择此选项
bbbbb
将选择此选项
还有这个
parsedList.includes（“on”）
-alwats返回false。返回语句用于
.forEach（（list，idx）=>{}
，而不是函数
getIdx（）
如果要返回索引，请使用普通for循环：
for（让idx=0；idx
另外，您想获取元素上的
索引还是单击元素的索引？您不能提前退出forEach（）调用。我可以在if语句中输入“return”如“return idx=i”；如果我想快速完成for loop？@羊驼只需在
idx=i
行之后添加一个
break
。这将导致结束循环。