Append CSS in loop

Question

I am trying to append different colors to some text:

var s = ["red", "green"];   
for (i=0; i < s.length; i++) {
    $(".colors").append("<span>TEXT </span>").css("color", s[i]);
}

The output of both spans is green, but my intention was that the first one is going to be red and only the second one green. What am I doing wrong?

Ram · Accepted Answer · 2013-04-27 08:50:54Z

6

That's because append returns the selected element not the appended element, so you are modifying color of the .colors element(s) not the appended elements, the last color wins and descendant elements inherit the color property.

$("<span>TEXT</span>").css("color", s[i]).appendTo(".colors");

edited Apr 27, 2013 at 8:50

answered Apr 27, 2013 at 8:40

Ram

145k16 gold badges174 silver badges201 bronze badges

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

Collectives™ on Stack Overflow

Append CSS in loop

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related