Question

请您查看this Demo并告诉我如何修复此代码的问题？

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

演示：Fiddle

也可以尝试

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

演示：Fiddle

Answer 2

您应该使用i否0

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

应用CSS在元素创建上附加函数的问题

2 个答案: