javascript - For循环只打印一个DIV标签。不是 8 个 DIV 标签

Question

我正在尝试循环一个数组并打印结果，如下所示:

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

你能看出问题所在吗？

Answer 1

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