我怎么寫這個javascript append（）; 更好？

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

Answer 2

一種簡單的方法是迭代html並將其附加到元素。

var html = '';
 for(var i=0;i< 9; i++) {
    html += '<div class="swatch" style="background-color:rgb(' + cp[i][0] + ',' + cp[i][1] + ',' + cp[i][2] + ');"></div>'
 }

$("#swatches").append(html);

Answer 3

首先，您可以將$('#swatches')分配給變量，這樣jQuery不必每次都解析您的string 。 其次，可以使用for循環來減少代碼長度：

var swatches = $('#swatches');

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

Answer 4

這是我的方法：

function getColorString(rgb) {
    return 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')';
}

for (var i = 0; i < cp.length; i++) {
    $('<div>', {
        class: 'swatch',
        css: {
            backgroundColor: getColorString(cp[i])
        }
    }).appendTo('#swatches');
}