使用 jquery 制作动态网格

Question

我正在尝试使用 jquery 创建一个动态网格，它最终会随着用户输入而改变（即 16x16、32x32 等）。我的逻辑是创建 16 行，然后在每行中创建 16 个正方形，但我无法让正方形附加正确的数量。

$(document).ready(function () {
    for (var i = 0; i < 16; i++) { 
        $('.grid').append("<div class = 'row'></div>");
      //$('.row').width(($('.square').width().val() * i);
      //for (var i = 0; i < 16; i++) {
           $('.row').append("<div class='square'></div>");
    // }
    }
});

这里是 link 它的样子：https://lettda.github.io/EtchAsketch/

Answer 1

.row 选择所有具有 class row 的元素，这意味着您不会仅将 .square div 附加到最后创建的行，您也将它们附加到所有以前创建的行。

为防止这种情况发生，您可以这样做。

for (var i = 0; i < 16; i++) { 
    var row = $("<div class = 'row'></div>");
    for (var j = 0; j < 16; j++) { 
        var square = $("<div class='square'></div>");
        row.append(square);
    }
    $('.grid').append(row);
}

或

for (var i = 0; i < 16; i++) { 
  $('.grid').append("<div class='row' id='row"+i+"'></div>");
  for (var j = 0; j < 16; j++) { 
      $('#row'+i).append("<div class='square'></div>");
  }
}

Answer 2

将内部 for 循环移出外部 for 循环应该会创建适当数量的方块，例如：

for (var i = 0; i < 16; i++) {
    $('.grid').append("<div class = 'row'></div>"); // Each grid gets 16 rows
}

for (var i = 0; i < 16; i++) {
    $('.row').append("<div class='square'></div>"); // Each row gets 16 squares
}

没有必要明确设置行宽，因为它会自动为正方形宽度加上您添加的任何 padding/margin 宽度的 16 倍。请注意，您所有的方块都需要 CSS 中的 display: inline-block; 以确保它们并排。此外，如果每行中的方块太多或方块太宽，行会换行。

使用 jquery 制作动态网格

Making a dynamic grid with jquery

javascript

jquery

frontend

twitter-bootstrap