Concatenate loop within loop in jQuery?

Question

I am trying to create a grid like structure. I want to create a loop within a loop and append divs based on if it is a column or a row. Below is my attempt:

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

What I would like to replicate in plain Javascript (code is most likely incorrect, I just want to show an example of what I want):

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>');
}

It would be useful if I could somehow replicate the document.write() method in jQuery. .append() did not work correctly for me when I tried to include a forloop.

Instead, simply generate a long html string, then append the string in the end. You won't have to change much of your logic. (you have a var name conflict with row that will cause you issues.) — user400654
– user400654, Commented Aug 19, 2013 at 15:57
document.write() is like setting the .innerHTML property of an element (could be document.body). jQuery's .append() does a lot better job of parsing the string and adding it to the DOM — Ian
– Ian, Commented Aug 19, 2013 at 15:57
@Ian, I tried .innerHTML but it does not concatenate properly. When I write: board.innerHTML = '<div class="row">'; This automatically closes the div. — Shivam
– Shivam, Commented Aug 19, 2013 at 16:00
@Shivam Not exactly. That is only true on a document that is still open, such as the DOM before it is ready while it is still being parsed. developer.mozilla.org/en-US/docs/Web/API/document.write — user400654
– user400654, Commented Aug 19, 2013 at 16:03

Dziad Borowy · Accepted Answer · 2013-08-19 16:02:48Z

2

You just need to loop through rows and then cells to build a single html string and than append it only once:

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

answered Aug 19, 2013 at 16:02

Dziad Borowy

12.6k4 gold badges44 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sumurai8 · Accepted Answer · 2013-08-19 16:11:32Z

1

What I understand you want to end up with a structure like this:

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

Let's assume you already have a board (<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 );
}

Edit: In your case you can even simplify it to:

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

edited Aug 19, 2013 at 16:11

answered Aug 19, 2013 at 16:04

Sumurai8

20.8k11 gold badges70 silver badges103 bronze badges

1 Comment

Dziad Borowy Over a year ago

this is very inefficient way of building HTML, as you're changing the dom with every step of the loop. Instead - you should build a html string and then - at the end - append it to the dom (only once).

Antti Haapala · Accepted Answer · 2013-08-20 01:39:33Z

1

Try the following - if you need to manipulate DOM more specifically, then use 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;

Or with JQuery:

var board = $('#board');
...
board.append($(html));

edited Aug 20, 2013 at 1:39

answered Aug 19, 2013 at 16:03

Antti Haapala

135k23 gold badges297 silver badges349 bronze badges

1 Comment

Antti Haapala Over a year ago

Ok thanks to uncommented downvote... there was 1 : instead of ;, hard to see on this display.

Collectives™ on Stack Overflow

Concatenate loop within loop in jQuery?

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related