このグリッドの仕組みの理解に役立つ

Question

forループの内部には、 "x"と "y"のループがあります。私はあなたがなぜこれがうまくいくために必要なのか分からないのですか？なぜ、コンテナがいっぱいになるまで、ループの1つが「四角形」を続けてくれるのではないのですか？

#JQUERY 
function makeGrid() { 
    for (var x = 0; x < numberSquares; x++) { 
     for (var y = 0; y < numberSquares; y++) { 
      $("<div class='square'></div>").appendTo('.container'); 
     } 
    } 
    $('.square').css({'width': squareSize, 'height': squareSize}); 
} 

Answer 1

これはあなたの上記の例では、単一のループで行うことができるが、私はそれはここでは2つのループで行われた主理由は適応性のためであると考えています。グリッドが完全な正方形でないユースケースを考えてみましょう。幅と高さをそれぞれ定義する変数のために、2つのループ内のnumberSquaresを簡単に交換することができます。正確にこのシナリオのために別途定義されたxとyもあります。

secondary理由として、2つのループを使用するとより明確になります。これが単一のループだった場合は、合計個の自分自身を「覚えておく」必要があります。たとえば、13×13グリッドの場合、numSquaresは169である必要があります。幅と高さの両方に再利用できる完璧な正方形の場合、「幅」が13であることよりはるかに覚えにくいです。

希望すると便利です。 :)