Javascript: using foreach on multiple arrays at once

Question

I have 2 arrays or more likely NodeLists ,

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

Currently i am iterating over them like this:

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

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

Since they both set the same property ie; background-color:red; , is there a shorthand way to loop through both nodelists at once?

 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>

Answer 1

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

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

Answer 2

You can select both mainSlides and thumbSlides like so:

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

Or, if you don't want to select them together (eg if you want to use them further separately) but just want to use them together for this specific action:

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

Answer 3

Your code allready works in my browser but in any way maybe this will help you :

This is access :

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

Take a look code snippet :

 const mainSlides = document.querySelectorAll('.mainSlides') const thumbSlides = document.querySelectorAll('.thumbSlides') mainSlides.forEach( (slide, index, 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, index, 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`; })

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