多循环结果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()}); 
    } 
});