如何使用JavaScript更改多个链接的背景颜色？

Question

I want to change the background-color of links according to the given array colors using javascript and mainly using for loop and the parent-child selector of javascript/jquery. When I will reach the end of elements of colors array, I'll start with the first element of colors array.

Array for color var colors = ['#607ec7', '#ca85ca', '#61c436', '#e54e7e', '#f4b23f', '#46c49c'];

 <div class="vce-featured-section"> <a href="#" class="category-97">ReraFirst Updates</a> <a href="#" class="category-97">ReraFirst Updates</a> <a href="#" class="category-97">ReraFirst Updates</a> <a href="#" class="category-97">ReraFirst Updates</a> <a href="#" class="category-97">ReraFirst Updates</a> <a href="#" class="category-97">ReraFirst Updates</a> <a href="#" class="category-97">ReraFirst Updates</a> <a href="#" class="category-97">ReraFirst Updates</a> <a href="#" class="category-97">ReraFirst Updates</a> </div> 

Answer 1

Use a while loop and for circular traversing of color array use colors[i % colors.length] :

 var colors = ['#607ec7', '#ca85ca', '#61c436', '#e54e7e', '#f4b23f', '#46c49c']; var i=0; var aElem = $('.vce-featured-section a'); while(i !== aElem.length){ $(aElem[i]).css('background', colors[i % colors.length]); i++; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="vce-featured-section"> <a href="#" class="category-97">ReraFirst Updates</a><br> <a href="#" class="category-97">ReraFirst Updates</a><br> <a href="#" class="category-97">ReraFirst Updates</a><br> <a href="#" class="category-97">ReraFirst Updates</a><br> <a href="#" class="category-97">ReraFirst Updates</a><br> <a href="#" class="category-97">ReraFirst Updates</a><br> <a href="#" class="category-97">ReraFirst Updates</a><br> <a href="#" class="category-97">ReraFirst Updates</a><br> <a href="#" class="category-97">ReraFirst Updates</a> </div> 

USING PURE JS

 var colors = ['#607ec7', '#ca85ca', '#61c436', '#e54e7e', '#f4b23f', '#46c49c']; var i=0; var aElem = document.querySelectorAll('.vce-featured-section a'); while(i !== aElem.length){ aElem[i].style.background = colors[i % colors.length]; i++; } 

 <div class="vce-featured-section"> <a href="#" class="category-97">ReraFirst Updates</a><br> <a href="#" class="category-97">ReraFirst Updates</a><br> <a href="#" class="category-97">ReraFirst Updates</a><br> <a href="#" class="category-97">ReraFirst Updates</a><br> <a href="#" class="category-97">ReraFirst Updates</a><br> <a href="#" class="category-97">ReraFirst Updates</a><br> <a href="#" class="category-97">ReraFirst Updates</a><br> <a href="#" class="category-97">ReraFirst Updates</a><br> <a href="#" class="category-97">ReraFirst Updates</a> </div> 

Answer 2

 var colors = ['#607ec7', '#ca85ca', '#61c436', '#e54e7e', '#f4b23f', '#46c49c']; for (i = 0; i <= colors.length; i++) { var a = document.createElement("a"); var t = document.createTextNode("ReraFirst Updates" + i); a.setAttribute("style", "background:" + colors[i] + ""); a.setAttribute("href", "#"); a.setAttribute("class", "category-97") a.appendChild(t); var br = document.createElement("br"); document.body.appendChild(a); document.body.appendChild(br); } 

Answer 3

You can use a simple .each loop to setup colors;

var colors = ['#607ec7', '#ca85ca', '#61c436', '#e54e7e', '#f4b23f', '#46c49c'];

var length = colors.length;
var currentColorIndex = 0;

$('.vce-featured-section a').each(function(index) {
  $(this).css('background-color', colors[currentColorIndex]);
  currentColorIndex = ++currentColorIndex % length;
});

<div class="vce-featured-section">
   <a href="#" class="category-97">ReraFirst Updates</a>
   <a href="#" class="category-97">ReraFirst Updates</a>
   <a href="#" class="category-97">ReraFirst Updates</a>
   <a href="#" class="category-97">ReraFirst Updates</a>
   <a href="#" class="category-97">ReraFirst Updates</a>
   <a href="#" class="category-97">ReraFirst Updates</a>
   <a href="#" class="category-97">ReraFirst Updates</a>
   <a href="#" class="category-97">ReraFirst Updates</a>
   <a href="#" class="category-97">ReraFirst Updates</a>
 </div>