Javascript 在jQuery中的循环中连接循环？

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

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

for（变量行=0；行<8；行++）{
$（“#板”）。追加（“”+行+“”）；
}

我想在纯Javascript中复制的内容（代码很可能不正确，我只想展示一个我想要的示例）：

var board=document.getElementById（'board'）；
对于（变量行=0；行<8；行++）{
书写（“”）；
for（变量col=0；col<8；col++）{
var row=document.getElementsByClassName（'row'）；
行。写入（“”+列+“”）
}
书写（“”）；
}

---

如果我能以某种方式复制

jQuery

中的

document.write（）

方法，这将非常有用

.append（）

在我尝试包含forloop时无法正常工作。

您只需在行和单元格之间循环以生成单个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(''));

var行=[]，单元格=[]；
对于（变量行=0；行<8；行++）{
单元格=[]；
对于（变量单元格=0；单元格<8；单元格++）{
单元格。推送（“”+行+“”）；
}
行.push（“”+单元格.join（“”）+“”）；
}
$（'#board'）.html（rows.join（''）；

---

您只需在行和单元格之间循环，构建一个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(''));

var行=[]，单元格=[]；
对于（变量行=0；行<8；行++）{
单元格=[]；
对于（变量单元格=0；单元格<8；单元格++）{
单元格。推送（“”+行+“”）；
}
行.push（“”+单元格.join（“”）+“”）；
}
$（'#board'）.html（rows.join（''）；

---

尝试以下方法-如果需要更具体地操作DOM，请使用JQuery

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

for (var row = 0; row < 8; row++) {
    html += '<div class="row">';
    for(var col = 0; col < 8; col++) {
        html += '<div class="piece">'+col+'</div>';
    }
    html += '</div>';
}

board.innerHTML = html;

---

尝试以下操作-如果需要更具体地操作DOM，请使用JQuery

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

for (var row = 0; row < 8; row++) {
    html += '<div class="row">';
    for(var col = 0; col < 8; col++) {
        html += '<div class="piece">'+col+'</div>';
    }
    html += '</div>';
}

board.innerHTML = html;

---

据我所知，您希望以这样的结构结束：

<div id="board">
  <div class="row">
    <div class="piece"></div>
    <div class="piece"></div>
    <div class="piece"></div>
    (...)
  </div>
  (...)
</div>

(...)
(...)

假设您已经有了一块板（

）

for（变量行=0；行<8；行++）{
//创建一行
$row=$（''）；
//在那一排塞满8块
for（变量col=0；col<8；col++）{
$row.append（$（''+col+''）；
}
//将行添加到板中
$（'#board'）。追加（$row）；
}

编辑：在您的情况下，您甚至可以将其简化为：

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

//Stuff 8 pieces in every of the 8 rows
//This can be done because the piece is the same for every row
for( var col = 0; col < 8; col++ ) {
  $('.row').append( $('<div class="piece">' + col + '</div>') );
}

//在电路板中填充8行
对于（变量行=0；行<8；行++）{
$（'董事会'）。追加（$（''）；
}
//在每8行中填充8块
//这是可以做到的，因为每一行的片段都是相同的
for（变量col=0；col<8；col++）{
$（'.row'）。追加（$（''+col+''）；
}

---

JSFIDLE:

据我所知，您希望以这样的结构结束：

<div id="board">
  <div class="row">
    <div class="piece"></div>
    <div class="piece"></div>
    <div class="piece"></div>
    (...)
  </div>
  (...)
</div>

(...)
(...)

假设您已经有了一块板（

）

for（变量行=0；行<8；行++）{
//创建一行
$row=$（''）；
//在那一排塞满8块
for（变量col=0；col<8；col++）{
$row.append（$（''+col+''）；
}
//将行添加到板中
$（'#board'）。追加（$row）；
}

编辑：在您的情况下，您甚至可以将其简化为：

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

//Stuff 8 pieces in every of the 8 rows
//This can be done because the piece is the same for every row
for( var col = 0; col < 8; col++ ) {
  $('.row').append( $('<div class="piece">' + col + '</div>') );
}

//在电路板中填充8行
对于（变量行=0；行<8；行++）{
$（'董事会'）。追加（$（''）；
}
//在每8行中填充8块
//这是可以做到的，因为每一行的片段都是相同的
for（变量col=0；col<8；col++）{
$（'.row'）。追加（$（''+col+''）；
}

---

jsFiddle:

相反，只需生成一个长html字符串，然后在最后追加该字符串。你不必改变你的逻辑。（您与

行

存在变量名称冲突，这将导致出现问题。）

document.write（）

类似于设置元素的

.innerHTML

属性（可以是

document.body

）。jQuery的

.append（）

在解析字符串并将其添加到DOM方面做得更好。您需要查看@Ian，我尝试了

.innerHTML

，但它没有正确连接。当我写：

board.innerHTML=''这会自动关闭div.@Shivam不完全正确。这仅适用于仍处于打开状态的文档，例如DOM，在它准备就绪时，它仍在被解析。相反，只需生成一个长html字符串，然后在最后追加该字符串。你不必改变你的逻辑。（您与
行
存在变量名称冲突，这将导致出现问题。）
document.write（）
类似于设置元素的
.innerHTML
属性（可以是
document.body
）。jQuery的
.append（）
在解析字符串并将其添加到DOM方面做得更好。您需要查看@Ian，我尝试了
.innerHTML
，但它没有正确连接。当我写：
board.innerHTML=''这会自动关闭div.@Shivam不完全正确。这仅适用于仍处于打开状态的文档，例如DOM，在它准备就绪时，它仍在被解析。这是一种非常低效的HTML构建方法，因为循环的每一步都在改变dom。相反，您应该构建一个html字符串，然后在最后将其附加到dom中（仅一次）。这是一种非常低效的构建html的方法，因为您在循环的每一步都在更改dom。相反，您应该构建一个html字符串，然后在最后将其附加到dom中（仅一次）。。。有一个：而不是；，在这个显示屏上很难看到。好的，多亏了未注释的否决票。。。有一个：而不是；，在这个显示器上很难看到。