CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ahmed Tag Amer
Ahmed Tag Amer

Reputation: 1422

Change div background colors according to array in JavaScript?

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.

Upvotes: 1

Views: 2070

Answers (4)

Bourbia Brahim
Bourbia Brahim

Reputation: 14702

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>

Upvotes: 1

Krishna Satwaji Khandagale
Krishna Satwaji Khandagale

Reputation: 2260

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.

Upvotes: 2

Manpreet Matharu
Manpreet Matharu

Reputation: 90

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>

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

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.

Upvotes: 0

Related Questions