javascript - 複数のランダムな結果はforループになりますか？

Question

64個の正方形を作成し、それぞれに固有の背景色を付けようとしています。私はかなり近いですが、ランダムな色を1つしか取得できないようです。

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");

---

2つの提案：

• DOMノードを1回だけ作成し、クローンを作成します（実際には改善されない可能性があるため、試してみる必要があります）。
• 複数のページのリフローを回避するために、要素を一度に挿入します。

$(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

eachすべてのDivに同じ色を適用し、 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()});
  }
});

Answer 3

正方形のクラスに背景スタイルを適用しています。すべてのdivは同じクラスを使用するため、すべてのdivは最後に生成した色を使用します。

これを試して：

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