使用jquery制作动态网格

Making a dynamic grid with jquery

本文关键字：动态 网格 jquery 使用      更新时间：2023-09-26

我正在尝试使用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>");
    // }
    }
});

这是一个链接到它的样子:https://lettda.github.io/EtchAsketch/

将内部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
}

显式设置行宽度是不必要的，因为它将自动是你的正方形宽度的16倍加上你添加的任何填充/边距。注意，你所有的正方形都需要在CSS中display: inline-block;以确保它们并排。此外，如果每行中有太多的正方形或正方形太宽，则行将自动换行。

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

为了防止这种情况，你可以这样做:

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>");
  }
}
相关文章：