Issue on Applying CSS to Append Function on Element Creation

Question

Can you please take a look at this Demo and let me know how to fix the issue on this code?

<div id="out"></div>

<script>
$(document).ready(function () {
    var colors = new Array("#FFF", "#CCC", "#7FFF00");
    for (var i = 0; i < colors.length; i++) {
        $("#out").append('<div class="box"></div>');
        $(".box").css("background-color",colors[0]);
    }
});
</script>

what I am trying to do is generating div elements based on an array length and set the background of them from the colors array

Thanks

Arun P Johny · Accepted Answer · 2014-05-26 04:00:31Z

2

The problem is, inside the loop, you are targetting all .box elements instead of targetint the element which was recently added.

You can use .appendTo() instead to return the recently added element and use that reference to make the css changes

$(document).ready(function () {
    var colors = new Array("#FFF", "#CCC", "#7FFF00");
    for (var i = 0; i < colors.length; i++) {
        var $el = $('<div class="box">1</div>').appendTo("#out");
        $el.css("background-color", colors[i]);//also need to use the index of the array instead of the hard coded 0
    }
});

Demo: Fiddle

Also try

jQuery(function ($) {
    var colors = new Array("#FFF", "#CCC", "#7FFF00");
    $.each(colors, function (i, color) {
        var $el = $('<div class="box">1</div>').appendTo("#out");
        $el.css("background-color", color);
    })
});

Demo: Fiddle

answered May 26, 2014 at 4:00

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

3 Comments

user3674990 Over a year ago

Wow! Thanks Arun, this was supper fast! I need 10 more minutes to accept your reply!

user3674990 Over a year ago

just can you please let me know why did you used appendto instead of append?

Arun P Johny Over a year ago

@user3674990 because .append() returns the reference to the #out element which is not what we wants.... while .appendTo() returns the reference to the newly created element which can be used for further modification.

Bhojendra Rauniyar · Accepted Answer · 2014-05-26 04:01:22Z

1

You should use i no 0

$(".box").css("background-color",colors[i]);

answered May 26, 2014 at 4:01

Bhojendra Rauniyar

86.1k36 gold badges179 silver badges241 bronze badges

1 Comment

user3674990 Over a year ago

Thanks C-link but this just generate boxes with one color(last code from the array)

Collectives™ on Stack Overflow

Issue on Applying CSS to Append Function on Element Creation

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related