將CSS應用於元素創建附加功能的問題

Question

您能否看一下此演示，並讓我知道如何解決此代碼上的問題？

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

我想做的是基於數組長度生成div元素，並從colors數組設置它們的背景

謝謝

Answer 1

問題是，在循環內，您將所有.box元素作為目標，而不是targetint最近添加的元素。

您可以改用.appendTo（）返回最近添加的元素，並使用該引用進行css更改

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

演示： 小提琴

也試試

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);
    })
});

演示： 小提琴

Answer 2

您應該使用i沒有0

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