JS中如何在循环内快速获取NodeList元素的查询类名

核心思路 #

先把查询用到的类名提取成数组，再利用数组的find()方法，从元素的类列表里匹配出属于该数组的类名——由于每个元素仅包含一个查询类，这个方法能直接得到目标类名。

代码实现 #

// 定义查询用到的类名数组
const targetClasses = ['class1', 'class2', 'etc'];

var nodeList = document.querySelectorAll(".class1, .class2, .etc...");
for (var i = 0; i < nodeList.length; i++) {
    // 一行代码获取当前元素对应的查询类名
    var classOfCurrentDiv = targetClasses.find(cls => nodeList[i].classList.contains(cls));
    
    // 执行你的业务操作
    console.log(classOfCurrentDiv);
}

极简单行版 #

如果不想单独定义数组，也可以直接把类名数组嵌入方法，实现真正的一行代码获取：

var nodeList = document.querySelectorAll(".class1, .class2, .etc...");
for (var i = 0; i < nodeList.length; i++) {
    var classOfCurrentDiv = ['class1', 'class2', 'etc'].find(cls => nodeList[i].classList.contains(cls));
    // 执行你的业务操作
}

补充说明 #

• find()方法会返回数组中第一个满足条件的元素，完全适配“每个元素仅含一个查询类”的前提
• 相比多if判断，这种写法扩展性更强，后续新增查询类只需修改数组即可

内容的提问来源于stack exchange，提问作者klaytonme