如何遍历这些跨度中的字母并按索引顺序从数组中为每个字母分配颜色？

Question

How do I write a simple for loop to iterate over span elements and assign each one a color from an array in an indexical order? So the B will be red, the E orange etc.

 const colors = ['red', 'orange', 'yellow', 'green'];

 <h1> <span>B</span> <span>E</span> <span>A</span> <span>R</span> </h1>

Answer 1

You can first try getting all the elements using Document.querySelectorAll() then loop through them using Array.prototype.forEach() to set the color using Math.random() .

Try the following way:

 const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']; //get all the elements const elements = document.querySelectorAll('h1 > span'); //declare an array to store all the used colors const usedColors = []; //loop through all the elements elements.forEach(function(span){ //get color randomly from the array var c = colors[Math.floor(Math.random()*colors.length)]; //check if the color is already used and loop to get new color while(usedColors.includes(c)){ //take another color from the array c = colors[Math.floor(Math.random()*colors.length)]; } //push to the used color array usedColors.push(c); //set the color to the element span.style.color = c; });

 <h1> <span>B</span> <span>E</span> <span>A</span> <span>R</span> </h1>

Update: It seems simpler using the index like the following way:

 const colors = ['red', 'orange', 'yellow', 'green']; //get all the elements const elements = document.querySelectorAll('h1 > span'); //loop through all the elements elements.forEach(function(span, i){ //set the color to the element using index i span.style.color = colors[i]; });

 <h1> <span>B</span> <span>E</span> <span>A</span> <span>R</span> </h1>

Answer 2

const abc = document.querySelectorAll('span');

   for (let index = 0; index < abc.length; index++){
     abc[index].style.color = colors[index];

This should work