提问人：Igor Gryp 提问时间：8/14/2023 更新时间：8/14/2023 访问量：57
如何更有效地将具有不同类名的元素保存在单独的变量中？
How to save elements with different class names in separate variables more efficiently?
问：
在我的程序中，我以经典的方式保存每个变量中的元素。但是，当元素很多时，代码行就很多行了。有没有更有效的方法可以做到这一点？
let el1 = document.getElementsByClassName('class-1');
let el2 = document.getElementsByClassName('class-2');
let el3 = document.getElementsByClassName('class-3');
let el4 = document.getElementsByClassName('class-4');
let el5 = document.getElementsByClassName('class-5');
let el6 = document.getElementsByClassName('class-6');
let el7 = document.getElementsByClassName('class-7');
let el8 = document.getElementsByClassName('class-8');
答：
1赞
Mamun
8/14/2023
#1
您可以将所有类放在一个数组中，然后遍历这些类：
let classNameArr = ['class-1', 'class-2', 'class-3', 'class-4', 'class-5', 'class-6', 'class-7', 'class-8'];
let elementArr = [];
classNameArr.forEach(cn => elementArr.push(document.getElementsByClassName(cn)));
现在通过以下方式访问它们：
let el1 = elementArr[0];
let el2 = elementArr[1];
....
评论
1赞
Oleh Kosarenko
8/14/2023
这是一个很好的解决方案，但似乎您遗漏了末尾的右括号“）”。它应该是这样的：classNameArr.forEach(cn => elementArr.push(document.getElementsByClassName(cn)));
0赞
Mamun
8/14/2023
@OlehKosarenko，更新，谢谢:)
0赞
Roko C. Buljan
8/14/2023
:\似乎你（用这个奇怪的解决方案）又回到了无用地写一行又一行（PS ...？let elN = elementArr[N];let
0赞
KooiInc
8/14/2023
#2
您可以将元素保存到对象中，以便能够按名称 （ ... ） 检索它们。这可以使用元素数组上的 reducer 函数来完成。el1elx
像这样：
createDemoElems();
// accumulate the elements with className .class-1 ... class-x
// into myElems
const myElems = [...document.querySelectorAll(`[class^=class-]`)]
.reduce( (acc, elem) => {
const elemIndex = [...elem.classList]
.find(cln => cln.startsWith(`class-`))
.replace(/[^\d]/g, ``);
return {...acc, [`el${elemIndex}`]: elem};
}, {});
// Now you can retrieve an elements using ...
console.log(myElems.el3);
// create 10 elements with class 'class-x'
function createDemoElems() {
for (let i = 0; i<11; i+=1) {
document.body.insertAdjacentHTML(`beforeend`,
`<div class="class-${i + 1} somethingElse">div.class-${i + 1}</div>`);
}
}评论
0赞
Roko C. Buljan
8/14/2023
实际上，正确的选择器应该是 。此外，我会要求 OP 解释他在做什么。这似乎是对错过的问题解决方案前提的错误方法。[class^=class-], [class*=" class-"]
评论
getElementsByClassName()