[英]Javascript: using foreach on multiple arrays at once
我有 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, 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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.