loop jquery object

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()

cletus · Accepted Answer · 2009-09-01 15:10:00Z

4

$("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];
}

edited Sep 1, 2009 at 15:10

answered Sep 1, 2009 at 15:01

cletus

627k169 gold badges922 silver badges945 bronze badges

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

4 Comments

adardesign Over a year ago

Great, how do i write this in generic js!

adardesign Over a year ago

for a project that will sadly not use jQuery

cletus Over a year ago

Um, if it doesn't use jQuery, how are you getting $("div")?

adardesign Over a year ago

it was just for my question purpose. Thanks anyway.

cllpse · Accepted Answer · 2009-09-01 15:21:43Z

3

Here's what you do:

var colors = ["#444", "#344", etc.];

$("div").each(function (i)
{
    $(this).css("background-color", colors[i]);
});

You might get a small speed-gain if you skip converting "this" into a jQuery object and just use the JavaScript native API, like so:

this.style.backgroundColor = colors[i];

Also, you might want to assign a default color, if you've got more DIV-elements than entries in your array:

this.style.backgroundColor = colors[i] || "#fff";

The native approach:

var colors = ["#444", "#344", etc.],
    divElements = document.getElementsByTagName("div"),
    i = divElements.length;

while (i)
{
    // This is a reverse while-loop and runs a lot faster than other methods.
    // This means that the first div element will get assigned the value of the
    // last entry in the "colors"-array. If this breaks your brain, use the
    // Array.reverse() function on the "colors"-array declaration :)

    i--;

    divElements[i].style.backgroundColor = colors[i] || "#fff";
}

edited Sep 1, 2009 at 15:21

answered Sep 1, 2009 at 15:03

cllpse

21.8k37 gold badges134 silver badges170 bronze badges

2 Comments

Julian Over a year ago

This answers the non-jQuery question well.

anddoutoi Over a year ago

+1 for nice code even if it´s not answering the original question.

Peter Bailey · Accepted Answer · 2009-09-01 15:00:46Z

0

try background-color instead of background, which is the shorthand for multiple other CSS rules.

divElements[h].css("background-color","#"+colorArray[h])

answered Sep 1, 2009 at 15:00

Peter Bailey

106k32 gold badges186 silver badges206 bronze badges

Collectives™ on Stack Overflow

loop jquery object

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related