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>

If you give both .mainSlides and .thumbSlides an additional class such as .slides, then you can select all slides and perform your loop on that one NodeList. Otherwise, if your NodeLists contain the same amount of elements, then you can iterate one and use the index (second argument of forEach callback) to target the other node list's elements — Nick Parsons
– Nick Parsons, Commented Jul 24, 2021 at 9:02
This code work fine ! I added your code to code snippet and works nice. I give you possible fix in answer. — Nikola Lukic
– Nikola Lukic, Commented Jul 24, 2021 at 9:33

trincot · Accepted Answer · 2021-07-24 09:05:48Z

3

Yes, you can select both in one selector:

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

answered Jul 24, 2021 at 9:05

trincot

357k38 gold badges282 silver badges338 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Adi Gerber · Accepted Answer · 2021-07-24 09:07:03Z

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 (e.g. 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';
})

answered Jul 24, 2021 at 9:07

Adi Gerber

6667 silver badges24 bronze badges

Collectives™ on Stack Overflow

Javascript: using foreach on multiple arrays at once

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related