How do I use for loop with jQuery?

Question

Hello I am a self taught developer and I am trying to use a for() loop with jQuery, but it does not seem to work. I am trying to loop through an array of RGB colors, that are hard coded for now with strings. Here is a snippet below on what I am trying to accomplish. I want each div to contain a diffrent

http://jsfiddle.net/CleverOscarDev/cyztq6m5/

var squares = $(".squares");
var colors = [
  "rgb(255, 0, 0)",
  "rgb(0, 255, 0)",
  "rgb(0, 0, 255)",
  "rgb(255, 0, 0)",
  "rgb(255, 0, 0)",
  "rgb(255, 0, 0)",
]

for (var i = 0; i < squares.length; i++) {
  squares[i].style.backgroundColor = colors;
}

This line squares[i].style.backgroundColor = colors is assigning the whole array. Instead, you should assign color[i] — pavi2410
– pavi2410, Commented Aug 31, 2018 at 4:48

cdoshi · Accepted Answer · 2018-08-31 04:47:45Z

7

Check the updated fiddle http://jsfiddle.net/0xdwhsnc/

You missed the index, instead of colors use colors[i]

for (var i = 0; i < squares.length; i++) {
 squares[i].style.backgroundColor = colors[i];
}

answered Aug 31, 2018 at 4:47

cdoshi

2,8321 gold badge15 silver badges21 bronze badges

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

1 Comment

Pranav C Balan Over a year ago

more specific : colors[i % colors.length]

Shiladitya · Accepted Answer · 2018-08-31 04:54:18Z

1

Try each loop. http://jsfiddle.net/cyztq6m5/15/

$(squares).each(function(key, value) {
  value.style.backgroundColor = colors[key];       
});

edited Aug 31, 2018 at 4:54

Shiladitya

12.2k17 gold badges29 silver badges43 bronze badges

answered Aug 31, 2018 at 4:51

user8824269

Comments

Deepak Singh · Accepted Answer · 2018-08-31 05:39:02Z

1

If your colors array is going to have same number of colors as the number of div.s with class square you can do this!

$(".squares").each(function(key, value) {
    $(this).css({"background-color" : colors[key]});
});

edited Aug 31, 2018 at 5:39

answered Aug 31, 2018 at 4:50

Deepak Singh

6501 gold badge9 silver badges26 bronze badges

2 Comments

Roberto Maldonado Over a year ago

You're setting on each iteration a given color for all squares at the same time

Deepak Singh Over a year ago

Updated the answer. thanks for the heads up @RobertoMaldonado

Fupeng Wang · Accepted Answer · 2018-08-31 04:51:17Z

0

You got a simple error, colors is an array, not a color string, so you should use colors[i]

for (var i = 0; i < squares.length; i++) {
  squares[i].style.backgroundColor = colors[i];
}

answered Aug 31, 2018 at 4:51

Fupeng Wang

942 bronze badges

Comments

Roberto Maldonado · Accepted Answer · 2018-08-31 06:08:50Z

0

you can also use jquery for each

$.each(squares, function(idx, square){
    square.style.backgroundColor=colors[idx]
});

edited Aug 31, 2018 at 6:08

Roberto Maldonado

1,59614 silver badges27 bronze badges

answered Aug 31, 2018 at 4:56

Prakash Belalakatte

12 bronze badges

Collectives™ on Stack Overflow

How do I use for loop with jQuery?

5 Answers 5

1 Comment

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related