多循環結果for循環？

Question

我正在試圖創建64個方塊並給每個獨特的背景顏色。我非常接近，但我似乎只能得到一種隨機顏色。

function randomCol() { 
    return Math.floor(Math.random()*16777215).toString(16); 
} 

$(function(){ 
    for(i=0; i<64; i++) { 
     $('<div class="square"></div>').insertAfter(".starter"); 
     $(".square").css({'background':'#' + randomCol()}); 
    } 
}); 

Answer 1

$(".square")選擇所有現有元件與square類，所以要分配相同的顏色，以每個元素。

你只需要指定顏色到剛剛創建一個：

$('<div class="square"></div>') 
    .css('background', '#' + randomCol()) 
    .insertAfter(".starter"); 

---

兩個建議：

• 創建DOM節點只有一次，克隆它（實際可能不被一個改進，你必須嘗試）。
• 一次插入所有元素以避免多個頁面重排。

$(function(){ 
    var $node = $('<div class="square"></div>'), 
     $elements = $(); 
    for(i=0; i<64; i++) { 
     $elements = $elements.add($node.clone().css('background','#' + randomCol())); 
    } 
    $('.starter').after($elements); 
}); 

Answer 2

你所申請的背景風格，以正方形類。因爲所有的div都使用同一個類，所以你的div將使用你生成的最後一種顏色。

試試這個：

$(function(){ 
    for(i=0; i<64; i++) { 
     $('<div id="square' + i + '"></div>').insertAfter(".starter"); 
     $("#square" + i).css({'background':'#' + randomCol()}); 
    } 
}); 

Answer 3

您應用相同的顏色到每一個事業部，可以使用each方法從JQuery的

$(function(){ 
    for(i=0; i<64; i++) { 
    $('<div class="square"></div>').insertAfter(".starter"); 
    } 
    $(".square").each(
    function(s){ 
     $(s).css({'background':'#' + randomCol()}) 
    } 
); 
}); 

或

$(function(){ 
    for(i=0; i<64; i++) { 
    $('<div class="square"></div>'). 
     insertAfter(".starter"). 
     css({'background':'#' + randomCol()}); 
    } 
});