多循环结果for循环?
我正在试图创建64个方块并给每个独特的背景颜色。我非常接近,但我似乎只能得到一种随机颜色。多循环结果for循环?
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()});
}
});
$(".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);
});
感谢您的性能提示!你在做上帝的工作,哈哈。 – user1569701 2012-08-01 20:56:50
你所申请的背景风格,以正方形类。因为所有的div都使用同一个类,所以你的div将使用你生成的最后一种颜色。
试试这个:
$(function(){
for(i=0; i<64; i++) {
$('<div id="square' + i + '"></div>').insertAfter(".starter");
$("#square" + i).css({'background':'#' + randomCol()});
}
});
与此,您将创建64平方ids – NicoSantangelo 2012-08-01 20:39:09
我意识到这一点。无论如何,菲利克斯克林的答案是更好的。 – xthexder 2012-08-01 20:40:16
您应用相同的颜色到每一个事业部,可以使用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()});
}
});
这将重新分配每个迭代中的每个元素的颜色... – 2012-08-01 20:43:04
true让我修复...固定在编辑 – 2012-08-01 20:43:43
“一个随机颜色” ,因为对'Math.random()'的调用每次都返回相同的数字? – KRyan 2012-08-01 20:39:58