Jquery modify elements in each loop

Question

Using jquery, I want to loop all elements having the class "item" and apply different background colors according to the index of the element.

mapcolor is an array of colors (length = number of elements having "item" class)

$.each($(".item"), function(i,e){
$("#"+e).css("background-color",mapcolor[i]);
});

$("#"+e) selector doesn't work as expected, neither $("#"+e.id) ... Something's wrong with my selector. Any idea?

Try $(this).css("background-color",mapcolor[i]);. I think this will work if not please let me know about your HTML DOM structure. — Deepak Biswal
– Deepak Biswal, Commented Aug 19, 2015 at 10:33
Thank you for your help.Actually every span is colored with the same color in my programm and it doesn't work. The issue must be elsewhere... I'm trying to figure out where. — Abspirit
– Abspirit, Commented Aug 19, 2015 at 11:03
Ok i figured out where was the issue. It was in another part of my programm and not in that "each loop". Thank you guys. — Abspirit
– Abspirit, Commented Aug 19, 2015 at 11:20

Jai · Accepted Answer · 2015-08-19 10:43:46Z

5

use .each() method instead and you have to be in the context with $(this):

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

Yet a better way is:

$(".item").css("background-color",function(){
    return mapcolor[$(this).index()];
});

make use of .css() method and pass a callback function to return the value.

A test is below:

var mapcolor = ['green', 'red', 'yellow'];

$(".item").css("background", function() {
  return mapcolor[$(this).index()];
});

div{height:10px;}

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

edited Aug 19, 2015 at 10:43

answered Aug 19, 2015 at 10:35

Jai

74.8k12 gold badges77 silver badges104 bronze badges

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

3 Comments

Abspirit Over a year ago

I've already tried that. Doesn't work.. It applies the same color (last one) to all elements

Jai Over a year ago

@Abspirit check a test snipped i have added.

Jai Over a year ago

@Abspirit the code snippet you have thrown here that led us to answer this so you have to ensure that this line is not in any other loop.

Zebi Rajpot · Accepted Answer · 2015-08-19 10:39:14Z

3

yes problem is in your selector ... problem is on this like

$("#"+e).css("background-color",mapcolor[i]);

why you using # with e because # represent id .. but here e is representing current selected tag in loop

so simply use $(e).css("background-color",mapcolor[i]); in your way..

or short and better way use this

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

answered Aug 19, 2015 at 10:39

Zebi Rajpot

1865 bronze badges

Comments

Deepak Biswal · Accepted Answer · 2015-08-19 10:36:20Z

0

Try something like this:

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

answered Aug 19, 2015 at 10:36

Deepak Biswal

4,3302 gold badges22 silver badges37 bronze badges

3 Comments

Abspirit Over a year ago

I've already tried that. Doesn't work.. It applies the same color (last one) to all elements

Deepak Biswal Over a year ago

Can you please provide your HTML structure. So that I can see the exact issue.

Deepak Biswal Over a year ago

If possible add to a jsfiddle. It's easier to see the exact issue.

Collectives™ on Stack Overflow

Jquery modify elements in each loop

3 Answers 3

3 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related