current community

your communities

more stack exchange communities

Stack Exchange
tour help
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.
up vote 6 down vote favorite

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 yesterday
    
I need support for all major browsers: Chrome, Firefox, Safari, Opera and IE –  RobinvdA yesterday
add comment

2 Answers

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
    
The general rule here is: What can reasonably be done with CSS over JavaScript, should be done with CSS over JavaScript. –  Madara Uchiha yesterday
add comment
up vote 2 down vote

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 yesterday
    
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 yesterday
    
To who ever down-voted my answer, I've updated it given @RobinvdA's comment. –  Greg Burghardt yesterday
add comment

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.