将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]);