0

グリッドのような構造を作成しようとしています。ループ内にループを作成し、列または行に基づいて 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>');
}

document.write()でメソッドを複製できれば便利ですjQuery。.append()forloop を含めようとしたときに、正しく機能しませんでした。

4

3 に答える 3

1

私が理解しているのは、次のような構造になりたいということです。

<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/

于 2013-08-19T16:04:56.400 に答える