Change div background colors according to array in JavaScript?

Question

I have divs that are loaded from a database, the number of divs is not known ( may increase or decrease ) , each div have a random color from my code :

$(".ooicon").each(function() {
  var items = ["#9062aa","#3fb4e9","#6fc063","#d94949","#f8951e","#7a564a","#029688","#2d2f79","#e81f63"];
  var color = items[Math.floor(Math.random() * items.length)];
  $(this).css('background', color);
});

this code gives a random color changed on each reload or refresh , I want to make the colors static and not changed on refresh,

for example the first div will have the color #9062aa from the code, the second will be #3fb4e9 and so on.. when the colors in the array reach the last, it start over again with the first color.

I hope you understand me.

var color = items[index % items.length]; index is passed as an argument to the callback function of each. — Teemu
– Teemu, Commented Aug 6, 2018 at 9:35

Krishna Satwaji Khandagale · Accepted Answer · 2018-08-06 09:45:00Z

2

DO not keep your colors array in .each loop, dont seem to be good code. so if you divide current index of item in .each loop with length, you will get desired reset logic to chose color from array.

 var items = ["#9062aa","#3fb4e9","#6fc063","#d94949","#f8951e",
 "#7a564a","#029688","#2d2f79","#e81f63"];

 $(".ooicon").each(function(index) {

   var color = items[index % items.length];
   $(this).css('background', color);

  });

This should work,hope this helps.

answered Aug 6, 2018 at 9:45

Krishna Satwaji Khandagale

2,27018 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Rory McCrossan Over a year ago

What's the point of adding the exact same answer as already provided?

Krishna Satwaji Khandagale Over a year ago

He he , good question , check the timestap please , mine is earlier though.

Rory McCrossan Over a year ago

No it's not. My answer is 4 minutes before yours.

Krishna Satwaji Khandagale Over a year ago

Correctly observed , now the point is I was typing my answer you might have typed and posted the exact same answer, so that has happened, please try to understand that too :(

imans77 · Accepted Answer · 2018-08-06 10:03:38Z

1

You just have to loop over the array without using random, and when the index is equal to the array items, reset it to 0.

See below snippet:

var items = ["#9062aa", "#3fb4e9", "#6fc063", "#d94949", "#f8951e", "#7a564a", "#029688", "#2d2f79", "#e81f63"];
var index = 0;
var color;
$(".ooicon").each(function() {
  if (index == items.length)
    index = 0;

  color = items[index];
  $(this).css('background', color);
  index++;
});

.ooicon {
  width: 100%;
  height: 10px;
  margin-bottom: 3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="ooicon"></div>
<div class="ooicon"></div>
<div class="ooicon"></div>
<div class="ooicon"></div>
<div class="ooicon"></div>
<div class="ooicon"></div>
<div class="ooicon"></div>
<div class="ooicon"></div>
<div class="ooicon"></div>

<div class="ooicon"></div>
<div class="ooicon"></div>
<div class="ooicon"></div>
<div class="ooicon"></div>
<div class="ooicon"></div>
<div class="ooicon"></div>
<div class="ooicon"></div>
<div class="ooicon"></div>
<div class="ooicon"></div>
<div class="ooicon"></div>
<div class="ooicon"></div>
<div class="ooicon"></div>

edited Aug 6, 2018 at 10:03

imans77

5125 silver badges16 bronze badges

answered Aug 6, 2018 at 9:40

Bourbia Brahim

14.7k4 gold badges45 silver badges55 bronze badges

2 Comments

Rory McCrossan Over a year ago

You don't need to maintain an index here at all, as one is passed to each()

Bourbia Brahim Over a year ago

@RoryMcCrossan , yep you're right , missed that , thanks.

Rory McCrossan · Accepted Answer · 2018-08-06 09:40:55Z

The colours change as you're using Math.random(). If you want them colours to be static based on the position of the elements in the set, use their index value instead. This can be retrieved as the first argument provided to each():

var items = ["#9062aa", "#3fb4e9", "#6fc063", "#d94949", "#f8951e", "#7a564a", "#029688", "#2d2f79", "#e81f63"];

$(".ooicon").each(function(i) {
  var color = items[i % items.length)];
  $(this).css('background-color', color);
});

Note that I moved the items declaration outside of the loop; there's no point redefining the same data in each iteration. Also note the use of the modulo operator (%) to simplify the iterative access of the array, and the change to set background-color directly.

Manpreet Matharu · Accepted Answer · 2018-08-06 09:42:56Z

You can do that without using math.random, check below snippet :

var colors = ["#9062aa","#3fb4e9","#6fc063","#d94949","#f8951e","#7a564a","#029688","#2d2f79","#e81f63"];
var count = 0;

function bgcolor() {
  $("body").find("div").each(function() {
    var index = $("body").find("div").index(this);
    var i = (index + count) % colors.length;
    $(this).css("background-color", colors[i]);
  });
  count++;
}

$(window).resize(bgcolor);
$(document).ready(bgcolor);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Content -1</div>
<div>Content - 2</div>
<div>Content - 3</div>
<div>Content - 4</div>
<div>Content - 5</div>
<div>Content - 6</div>
<div>Content - 7</div>
<div>Content - 8</div>
<div>Content - 9</div>
<div>Content - 10</div>
<div>Content - 11</div>
<div>Content - 12</div>
<div>Content - 13</div>

Collectives™ on Stack Overflow

Change div background colors according to array in JavaScript?

4 Answers 4

4 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related