javascript - Javascript loop through DOM

Question

I have 10 of these divs, with class names one through ten.

<div class="grid">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
    <div class="five"></div>
    <div class="six"></div>
    <div class="seven"></div>
    <div class="eight"></div>
    <div class="nine"></div>
    <div class="ten"></div>
</div>

Is there an easy way to create a Javascript loop to do this for each div?

const one = document.getElementsByClassName('one')[0]; 
one.style.backgroundImage='url(/images/items/' + year + '/1.jpg)';

标签： javascripthtml

Answer 1

You can loop over an array of names.

["one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten"]
    .forEach((name, idx)=>
       document.querySelector('.' + name).style.backgroundImage=
         'url(/images/items/' + year + '/' + (idx + 1) + '.jpg)');