javascript - 在创建元素时应用 CSS 附加功能的问题

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 元素并从颜色数组设置它们的背景

谢谢

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