For循环只打印一个DIV标记.不是8个DIV标签

For loop only prints one DIV tag. Not 8 DIV tags

本文关键字：DIV 一个 标记 不是 标签 8个 循环 打印 For      更新时间：2023-11-14

我正在尝试循环一个数组并打印如下结果：

<div class="photo-palette">
    <div class="photo-palette-inner" style="background-color: rgb(68, 73, 68);"></div>
    <div class="photo-palette-inner" style="background-color: rgb(54, 37, 28);"></div>
    ...
</div>

这是我的代码：

var colorThief = new ColorThief();
var image = $("#histogram-image")[0];
var palette = colorThief.getPalette(image);
for (var i = 0, len = palette.length; i < len; i++) {
    $('.photo-palette').html('<div class="photo-palette-inner" style="background-color: rgb(' + palette[i] + ');"></div>');
}

但那个循环只打印这个：

<div class="photo-palette">
    <div class="photo-palette-inner" style="background-color: rgb(68, 73, 68);"></div>
</div>

我看不出这个循环有什么错！console.log(palette)打印以下内容：

[Array[3], Array[3], Array[3], Array[3], Array[3], Array[3], Array[3], Array[3], Array[3]]
    0: Array[3]
        0: 68
        1: 73
        2: 68
        length: 3
        __proto__: Array[0]
    1: Array[3]
    2: Array[3]
    3: Array[3]
    4: Array[3]
    5: Array[3]
    6: Array[3]
    7: Array[3]
    8: Array[3]
    length: 9
    __proto__: Array[0]

你能看到问题吗？

.html()覆盖该div的全部内容。您需要在循环中append，否则您的最后一次迭代将是该div中的唯一内容。

相关文章：