javascript - 我怎样才能写这个javascriptappend();更好的？

Question

我已经学习 javascript 几个星期了，目前我对它的了解相对不错，但我陷入了它的“最佳实践”方面。

例如这个append();功能。我怎样才能写得更好？

$("#swatches").append('<div class="swatch" style="background-color:rgb('+cp[0][0]+','+cp[0][1]+','+cp[0][2]+');"></div>');
$("#swatches").append('<div class="swatch" style="background-color:rgb('+cp[1][0]+','+cp[1][1]+','+cp[1][2]+');"></div>');
$("#swatches").append('<div class="swatch" style="background-color:rgb('+cp[2][0]+','+cp[2][1]+','+cp[2][2]+');"></div>');
$("#swatches").append('<div class="swatch" style="background-color:rgb('+cp[3][0]+','+cp[3][1]+','+cp[3][2]+');"></div>');
$("#swatches").append('<div class="swatch" style="background-color:rgb('+cp[4][0]+','+cp[4][1]+','+cp[4][2]+');"></div>');
$("#swatches").append('<div class="swatch" style="background-color:rgb('+cp[5][0]+','+cp[5][1]+','+cp[5][2]+');"></div>');
$("#swatches").append('<div class="swatch" style="background-color:rgb('+cp[6][0]+','+cp[6][1]+','+cp[6][2]+');"></div>');
$("#swatches").append('<div class="swatch" style="background-color:rgb('+cp[7][0]+','+cp[7][1]+','+cp[7][2]+');"></div>');
$("#swatches").append('<div class="swatch" style="background-color:rgb('+cp[8][0]+','+cp[8][1]+','+cp[8][2]+');"></div>');

我知道这是可行的，但我也知道必须有不同的、更好的方法来编写它。我只是不知道它是什么:)

任何帮助/解释将不胜感激!

提前致谢

Answer 1

您可以使用for循环:

var swatches = $("#swatches");
for(var i = 0; i <= 8; i++) { 
    swatches.append('<div class="swatch" style="background-color:rgb('+cp[i][0]+','+cp[i][1]+','+cp[i][2]+');"></div>');
}