How to append a class based on a variable

Question

I'm trying to build a chessboard, which this code does. However, I don't know how to add the rows and columns (eg. a1, g3...) to each individual space as a class. I would like to use the j variable in the for loop for the numbers, and then something like column[counter] to add the row. Roughly something like this; class = "column[counter]+j". I know this syntax won't work, So I'm wondering, is there a way to do this the way I'm trying? Thanks, any help appreciated.

 $(function(){
  var counter = 0,
  var column = ['a','b','c','d','e','f','g','h']
  for(i=0;i<8;i++) {
    if (i%2==0) {
      for (j=0;j<8;j++) {
        $('.chessboard').append("<div class='space even'></div>");

      }
    } else {
      for (j=0;j<8;j++) {
        $('.chessboard').append("<div class='space odd'></div>");
      }
    counter ++
  }
});

Answer 1

This is the best way to achieve what you're looking for :

$(function(){
    var column = ['a','b','c','d','e','f','g','h'];
    var $chessboard = $('.chessboard');
    for(i=0;i<8;i++)
        for (j=0;j<8;j++)
            $chessboard.append("<div class='" +
                               column[i] + "-" + j +
                               (j%2===0 ? " evencol" : " oddcol") +
                               (i%2===0 ? " evenrow" : " oddrow") +
                               "'></div>");
});

It generates the following HTML :

<div class="a-0 evencol evenrow"></div>
<div class="a-1 oddcol evenrow"></div>
<div class="a-2 evencol evenrow"></div>
<div class="a-3 oddcol evenrow"></div>
<div class="a-4 evencol evenrow"></div>
<div class="a-5 oddcol evenrow"></div>
<div class="a-6 evencol evenrow"></div>
<div class="a-7 oddcol evenrow"></div>
<div class="b-0 evencol oddrow"></div>
<div class="b-1 oddcol oddrow"></div>
<div class="b-2 evencol oddrow"></div>
<div class="b-3 oddcol oddrow"></div>
<div class="b-4 evencol oddrow"></div>
<div class="b-5 oddcol oddrow"></div>
<div class="b-6 evencol oddrow"></div>
<div class="b-7 oddcol oddrow"></div>
<div class="c-0 evencol evenrow"></div>
<div class="c-1 oddcol evenrow"></div>
<div class="c-2 evencol evenrow"></div>
<div class="c-3 oddcol evenrow"></div>
<div class="c-4 evencol evenrow"></div>
<div class="c-5 oddcol evenrow"></div>
<div class="c-6 evencol evenrow"></div>
<div class="c-7 oddcol evenrow"></div>
<div class="d-0 evencol oddrow"></div>
<div class="d-1 oddcol oddrow"></div>
<div class="d-2 evencol oddrow"></div>
<div class="d-3 oddcol oddrow"></div>
<div class="d-4 evencol oddrow"></div>
<div class="d-5 oddcol oddrow"></div>
<div class="d-6 evencol oddrow"></div>
<div class="d-7 oddcol oddrow"></div>
<div class="e-0 evencol evenrow"></div>
<div class="e-1 oddcol evenrow"></div>
<div class="e-2 evencol evenrow"></div>
<div class="e-3 oddcol evenrow"></div>
<div class="e-4 evencol evenrow"></div>
<div class="e-5 oddcol evenrow"></div>
<div class="e-6 evencol evenrow"></div>
<div class="e-7 oddcol evenrow"></div>
<div class="f-0 evencol oddrow"></div>
<div class="f-1 oddcol oddrow"></div>
<div class="f-2 evencol oddrow"></div>
<div class="f-3 oddcol oddrow"></div>
<div class="f-4 evencol oddrow"></div>
<div class="f-5 oddcol oddrow"></div>
<div class="f-6 evencol oddrow"></div>
<div class="f-7 oddcol oddrow"></div>
<div class="g-0 evencol evenrow"></div>
<div class="g-1 oddcol evenrow"></div>
<div class="g-2 evencol evenrow"></div>
<div class="g-3 oddcol evenrow"></div>
<div class="g-4 evencol evenrow"></div>
<div class="g-5 oddcol evenrow"></div>
<div class="g-6 evencol evenrow"></div>
<div class="g-7 oddcol evenrow"></div>
<div class="h-0 evencol oddrow"></div>
<div class="h-1 oddcol oddrow"></div>
<div class="h-2 evencol oddrow"></div>
<div class="h-3 oddcol oddrow"></div>
<div class="h-4 evencol oddrow"></div>
<div class="h-5 oddcol oddrow"></div>
<div class="h-6 evencol oddrow"></div>
<div class="h-7 oddcol oddrow"></div>

Now, just add a few lines of CSS, and your result should look like this :

See this Fiddle for a demo.

---

Alternative implementation :

An alternative approach would be to do this :

$(function(){
    var column = ['a','b','c','d','e','f','g','h'];
    var currentRow;
    var $chessboard = $('.chessboard');
    for(i=0;i<8;i++) {
        currentRow = $("<div class='" + (i%2===0 ? " even" : " odd") + "'></div>").appendTo($chessboard);
        for (j=0;j<8;j++) {
            currentRow.append("<div class='" + column[i] + "-" + j + (j%2===0 ? " even" : " odd") + "'></div>");
        }
    }
});

It generates the following HTML :

<div class="even">
    <div class="a-0 even"></div>
    <div class="a-1 odd"></div>
    <div class="a-2 even"></div>
    <div class="a-3 odd"></div>
    <div class="a-4 even"></div>
    <div class="a-5 odd"></div>
    <div class="a-6 even"></div>
    <div class="a-7 odd"></div>
</div>
<div class="odd">
    <div class="b-0 even"></div>
    <div class="b-1 odd"></div>
    <div class="b-2 even"></div>
    <div class="b-3 odd"></div>
    <div class="b-4 even"></div>
    <div class="b-5 odd"></div>
    <div class="b-6 even"></div>
    <div class="b-7 odd"></div>
</div>
<div class="even">
    <div class="c-0 even"></div>
    <div class="c-1 odd"></div>
    <div class="c-2 even"></div>
    <div class="c-3 odd"></div>
    <div class="c-4 even"></div>
    <div class="c-5 odd"></div>
    <div class="c-6 even"></div>
    <div class="c-7 odd"></div>
</div>
<div class="odd">
    <div class="d-0 even"></div>
    <div class="d-1 odd"></div>
    <div class="d-2 even"></div>
    <div class="d-3 odd"></div>
    <div class="d-4 even"></div>
    <div class="d-5 odd"></div>
    <div class="d-6 even"></div>
    <div class="d-7 odd"></div>
</div>
<div class="even">
    <div class="e-0 even"></div>
    <div class="e-1 odd"></div>
    <div class="e-2 even"></div>
    <div class="e-3 odd"></div>
    <div class="e-4 even"></div>
    <div class="e-5 odd"></div>
    <div class="e-6 even"></div>
    <div class="e-7 odd"></div>
</div>
<div class="odd">
    <div class="f-0 even"></div>
    <div class="f-1 odd"></div>
    <div class="f-2 even"></div>
    <div class="f-3 odd"></div>
    <div class="f-4 even"></div>
    <div class="f-5 odd"></div>
    <div class="f-6 even"></div>
    <div class="f-7 odd"></div>
</div>
<div class="even">
    <div class="g-0 even"></div>
    <div class="g-1 odd"></div>
    <div class="g-2 even"></div>
    <div class="g-3 odd"></div>
    <div class="g-4 even"></div>
    <div class="g-5 odd"></div>
    <div class="g-6 even"></div>
    <div class="g-7 odd"></div>
</div>
<div class="odd">
    <div class="h-0 even"></div>
    <div class="h-1 odd"></div>
    <div class="h-2 even"></div>
    <div class="h-3 odd"></div>
    <div class="h-4 even"></div>
    <div class="h-5 odd"></div>
    <div class="h-6 even"></div>
    <div class="h-7 odd"></div>
</div>

With some slight differences in your CSS (compared with the other option, your result should also look like this :

See this Fiddle for a demo.

Answer 2

I cleaned up the javascript a little to give you a good base to build on. Leveraging jQuery to add classes instead of appending strings is a nice way to keep things simple.

$(function(){  
    var column = ['a','b','c','d','e','f','g','h'];
    for(var i = 0; i < 8; i++) {    
        for (var j = 0; j < 8; j++) {
            var tile = $("<div class='space'></div>");

            //add even or odd class
            tile.addClass( i % 2 === 0 ? 'even' : 'odd' );          

            //add name of tile class
            tile.addClass(column[i] + (j + 1));

            $('.chessboard').append(tile);
        }
    } 
});