如何使用jQuery创建指定尺寸元素网格？现有代码存在嵌套问题

你的推测完全正确——问题出在每次循环时，你用全局选择器去查找行元素，导致所有列都被追加到了第一行。正确的做法是每次创建行后，直接操作当前刚生成的行元素，而不是去全局查找。

关键问题点 #

1. 你代码里行元素的class是row，却用了$("#row")（ID选择器），这本身就无法正确匹配元素；
2. 即便用类选择器$(".row")，每次循环也会选中所有已创建的行，导致列被重复添加到每一行。

修正后的代码 #

$("input").click(function(){
  var gameSize = $(this).attr("id");
  $("#cardspace").empty();  

  // 从ID中提取网格尺寸（4/6/8），统一处理逻辑
  var gridSize = parseInt(gameSize.split("x")[0]);
  
  for(var rowIdx = 0; rowIdx < gridSize; rowIdx++) {
    // 创建当前行并保存为变量，避免全局查找
    var $currentRow = $("<div class='row'></div>");
    $("#cardspace").append($currentRow);
                           
    for (var colIdx = 0; colIdx < gridSize; colIdx++) {
      // 直接将列元素追加到当前行变量中
      $currentRow.append("<div class='gamecard col-sm'></div>"); 
    }
  }
  
  // 切换网格样式类，先移除旧类再添加新类
  $("#cardspace").removeClass("four-four six-six eight-eight").addClass(gameSize.replace("x", "-"));
});

优化说明 #

• 拆分gameSize获取网格尺寸，不用写重复的switch分支，4x4、6x6、8x8逻辑统一；
• 用变量存储当前行，直接操作该变量添加列元素，彻底避免选择器匹配错误；
• 切换尺寸时先移除旧的样式类，避免多个样式类叠加导致布局混乱。

内容的提问来源于stack exchange，提问作者Brandon