Question

I simply try to assign a background color to each div.
it looks simple but it doesn’t work.

var divElements = $("div");
var colorArray =["444", "344", "345", "472", "837", "043", "345", "472", "837", "043"];

for (var i=0; i< divElements.length; i++){
divElements[i].css("background","#"+colorArray[i])
}

I also tried to use jQuery’s each

$("div").each(function(i) {
  divElements[i].css("background","#"+colorArray[i])
})

How do code this in javaScript generic “for loop” and jQuerys .each()

Answer 1

$("div").each(function(i, val) {
  $(this).css("background", "#" + colorArray[i]);
});

You have to watch out for exceeding the bounds of colorArray though (ie if you get too many divs). Possibilities include stopping when you hit the max:

$("div").each(function(i, val) {
  if (i > colorArray.length) {
    return false; // breaks $.each() loop
  }
  $(this).css("background", "#" + colorArray[i]);
});

or cycle through them:

$("div").each(function(i, val) {
  $(this).css("background", "#" + colorArray[i & colorArray.length]);
});

Not sure why you’d want to do it as Javascript but:

var divElements = document.getElementsByTagName("div");
var colorArray =["444", "344", "345", "472", "837", "043", "345", "472", "837", "043"];
for (var i=0; i< divElements.length; i++){
  divElements[i].style.backgroundColor = '#' + colorArray[i];
}