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

What are you using the classes for? It's entirely possible that, based on CSS3 selectors, you don't actually need to add classes, and could instead use a selector like div.space:even. — Katana314
– Katana314, Commented Jan 14, 2016 at 3:20
Eventually I'll have to target each individual space for game logic, I'm using odd and even classes for the alternating colors. — Anthony D
– Anthony D, Commented Jan 14, 2016 at 3:23
Anytime I add code inside append() it returns a string. I'm trying to dynamically change the class on the fly based on the j variable and the counter to produce classes: a1, a5, g4, ect...Is this possible when using append? — Anthony D
– Anthony D, Commented Jan 14, 2016 at 3:32

IrkenInvader · Accepted Answer · 2016-01-14 03:43:34Z

3

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

edited Jan 14, 2016 at 3:43

answered Jan 14, 2016 at 3:39

IrkenInvader

4,0401 gold badge14 silver badges25 bronze badges

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

3 Comments

Matt Over a year ago

I like this improved approach from concatenation spaghetti into addClass

Anthony D Over a year ago

Really like the refactored code, I'm still learning so doing it like this didn't occur to me. I like how all the logic takes place before its appended. Easier to read. Much appreciated!

John Slegers Over a year ago

@AnthonyD : For a solution that's both performance optimized and easy to style, I'd recommend my second solution @ stackoverflow.com/questions/34781109/… (see also jsfiddle.net/2gxLhnb6/10 for a demo).

John Slegers · Accepted Answer · 2016-01-14 04:23:14Z

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.

Thanks for the quick response, much appreciated. I chose IrkenIvaders answer because I found it easier to read. Thanks again!
@AnthonyD IrkenIvader's answer may be more readable, but my answer is optimised for performance AND HTML output is easier to style with CSS (see jsfiddle.net/2gxLhnb6/9). Also, there's the alternative answer, which generates more readable HTML code.

Collectives™ on Stack Overflow

How to append a class based on a variable

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related