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

如何解决Javascript：一次在多个数组上使用 foreach

我有 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>

解决方法

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

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

,

您可以像这样同时选择 mainSlides 和 thumbSlides：

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

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

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

,

您的代码已经可以在我的浏览器中运行了，但无论如何这可能会对您有所帮助：

这是访问：

mainSlides.forEach( (item,index,array) => {
  array[index] = newValue;
})

看看代码片段：

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


mainSlides.forEach( (slide,mainSlidesReference) => {
    console.log("This is only for collecting variable => ",slide.style.backgroundColor)
    // You can named who ever you want - importanty it is third argument
    // Ussually called simple `array`
    // I give him mainSlidesReference to make clear 
    mainSlidesReference[index].style.backgroundColor = `red`;
})


thumbSlides.forEach( (slide,slide.style.backgroundColor)
    // You can named who ever you want - importanty it is third argument
    // Ussually called simple `array`
    // I give him mainSlidesReference to make clear 
    mainSlidesReference[index].style.backgroundColor = `red`;
})

.holder {
  display:flex;
}

.mainSlides {
  background-color: black;
}


.thumbSlides {
  background-color: black;
}

<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>