Javascript：一次在多个数组上使用 foreach答案

【问题标题】：Javascript: using foreach on multiple arrays at onceJavascript：一次在多个数组上使用 foreach
【发布时间】：2021-10-01 03:08:32
【问题描述】：

我有 2 个arrays 或更可能是NodeLists，

const mainSlides = document.querySelectorAll('.mainSlides')
const thumbSlides = document.querySelectorAll('.thumbSlides')

目前我正在像这样迭代它们：


mainSlides.forEach(slide => {
    slide.style.backgroundColor = `red`
})

thumbSlides.forEach(slide => {
    slide.style.backgroundColor = `red`
})

因为它们都设置了相同的属性，即； background-color:red;，有没有一种简单的方法可以同时遍历两个节点列表？

const mainSlides = document.querySelectorAll('.mainSlides')
const thumbSlides = document.querySelectorAll('.thumbSlides')

mainSlides.forEach(slide => {
    slide.style.backgroundColor = `red`
})

thumbSlides.forEach(slide => {
  //  slide.style.backgroundColor = `red`
})

<div class="holder">
  <div class="mainSlides"> some mainSlides </div>
  <div class="mainSlides"> some mainSlides </div>
  <div class="mainSlides"> some mainSlides </div>
  <div class="mainSlides"> some mainSlides </div>
</div>

 <div class="holder">  
  <div class="thumbSlides"> some mainSlides </div>
  <div class="thumbSlides"> some mainSlides </div>
  <div class="thumbSlides"> some mainSlides </div>
  <div class="thumbSlides"> some mainSlides </div>
</div>

【问题讨论】：

如果你给.mainSlides和.thumbSlides一个额外的类，比如.slides，那么你可以选择所有slides并在那个NodeList上执行你的循环。否则，如果您的 NodeLists 包含相同数量的元素，那么您可以迭代一个并使用索引（forEach 回调的第二个参数）来定位另一个节点列表的元素
这段代码工作正常！我将您的代码添加到代码 sn-p 并且效果很好。我给你可能的答案。

标签： javascript arrays dom foreach nodelist

【解决方案1】：

您可以同时选择mainSlides 和thumbSlides，如下所示：

const allSlides = document.querySelectorAll('.mainSlides, .thumbSlides');

或者，如果您不想一起选择它们（例如，如果您想进一步单独使用它们）但只想将它们一起用于此特定操作：

const allSlides = [...mainSlides, ...thumbSlides];
allSlides.forEach(slide => {
    slide.style.backgroundColor = 'red';
})

【讨论】：

【解决方案2】：

是的，您可以在一个选择器中同时选择两者：

const mainAndThumbSlides = document.querySelectorAll('.mainSlides,.thumbSlides')

【讨论】：