在jQuery中连接循环中的循环

Concatenate loop within loop in jQuery?

本文关键字：循环 jQuery 连接      更新时间：2023-09-26

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

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()对我来说无法正常工作。

您只需要遍历行，然后遍历单元格，就可以构建一个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(''));

此处演示

据我所知，您希望最终得到这样的结构：

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

假设您已经有了一个板（<div id="board"></div>）。

for( var row = 0; row < 8; row++ ) {
  //Create a row
  $row = $('<div class="row"></div>');
  //Stuff 8 pieces in that row
  for( var col = 0; col < 8; col++ ) {
    $row.append( $('<div class="piece">' + col + '</div>') );
  }
  //Add the row to the board
  $('#board').append( $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>') );
}

jsFiddle：http://jsfiddle.net/3jGnF/

尝试以下操作-如果需要更具体地操作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;

或者使用JQuery:

var board = $('#board');
...
board.append($(html));
相关文章：