问题描述
我有 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>