Take the 2-minute tour ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.

I was cleaning up my code when I came across this situation :

var a = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'];
var count = 1;
var html = '';
for (var i = 0; i < a.length; i++) {
    var rowStart = '<div class="row">';
    var cell = '<div class="c">';
    cell += '<div class="title">' + a[i] + '</div>';
    cell += '</div>';
    var rowEnd = '</div>';

    if (count == 1) {
        html += rowStart + cell;
        count++;
    } else if (count == 3) {
        html += cell + rowEnd;
        count = 1;
    } else {
        html += cell;
        count++
    }
}
$('#container').append(html);

jsFiddle

I retrieve data from a database which I want to display in a div structure as shown above. This code however looks ugly and I think it can be way shorter, I just don't know how.

I was hoping someone could give me some advice/methods/anything on how to clean up this code.

share|improve this question
    
What kind of browser support do you need? –  Madara Uchiha Jun 10 at 12:43
    
I need support for all major browsers: Chrome, Firefox, Safari, Opera and IE –  RobinvdA Jun 10 at 13:10

2 Answers 2

up vote 7 down vote accepted

You should let CSS handle most of the job for you. Example

JS:

var a = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'];
var count = 1;
var html = '';
for (var i = 0; i < a.length; i++) {
    var div = $("<div>" + a[i] + "</div>");
    $('#container').append(div);
}

CSS (where the magic is):

#container div:nth-child(3n+1) { /* Every third! */
    clear: both;
}

#container div {
    float: left;
    width: 100px;
}
share|improve this answer
2  
The general rule here is: What can reasonably be done with CSS over JavaScript, should be done with CSS over JavaScript. –  Madara Uchiha Jun 10 at 16:21

It sounds like you want a JavaScript Template Engine to render raw data into HTML. JavaScript template engines also pair well with a view resolver like Bloodhound (which I wrote).

Edit #1: If you need something lighter weight this would suffice:

function render(template, data) {
    return template.replace(/#\{(\w+)}/g, function(tag, key) {
        return (key in data) ? data[key] : "";
    });
}

And to use:

var template = document.getElementById("template").innerHTML,
    html = render(template, {
        title: "Just a Render Test",
        price: 22.85
    });

document.getElementById("output").innerHTML = html;

JsFiddle: http://jsfiddle.net/aq8Jy/

share|improve this answer
    
Hmm never heard of template engines. I just looked into it but i think it's a bit too much for my goal isn't it? –  RobinvdA Jun 10 at 13:13
    
It all depends on how many time you need to render a template. If this is the only place, then a template engine might be a bit much. Updating my answer with another idea. –  Greg Burghardt Jun 10 at 13:16
    
To who ever down-voted my answer, I've updated it given @RobinvdA's comment. –  Greg Burghardt Jun 10 at 14:15

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.