javascript - 在 jQuery 中连接循环内的循环？

Question

我正在尝试创建一个类似网格的结构。我想在循环中创建一个循环，并根据它是列还是行来附加 div。下面是我的attempt :

for (var row = 0; row < 8; row++) {
    $('#board').append('<div class="row">'+ row +'</div>');  
}

我想用纯 Javascript 复制什么(代码很可能是不正确的，我只是想展示一个我想要的示例):

var board = document.getElementById('board');

for (var row = 0; row < 8; row++) {
    board.write('<div class="row">');
    for(var col = 0; col < 8; col++) {
        var row = document.getElementsByClassName('row');
        row.write('<div class="piece">'+col+'</div>')
    }
    board.write('</div>');
}

如果我能以某种方式复制 jQuery 中的 document.write() 方法，那将会很有用。当我尝试包含 forloop 时，.append() 无法正常工作。

Answer 1

您只需循环遍历行和单元格即可构建单个 html 字符串，然后仅将其附加一次:

var rows = [], cells = [];
for (var row = 0; row < 8; row++) {
    cells = [];
    for (var cell = 0; cell < 8; cell++) {
        cells.push('<div class="piece">'+ row +'</div>');
    }
    rows.push('<div class="row">' + cells.join('') + '</div>');
}

$('#board').html(rows.join(''));

DEMO HERE