7
\$\begingroup\$

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.

\$\endgroup\$
2
  • \$\begingroup\$ What kind of browser support do you need? \$\endgroup\$ Jun 10 '14 at 12:43
  • \$\begingroup\$ I need support for all major browsers: Chrome, Firefox, Safari, Opera and IE \$\endgroup\$
    – RobinvdA
    Jun 10 '14 at 13:10
7
\$\begingroup\$

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;
}
\$\endgroup\$
1
  • 2
    \$\begingroup\$ The general rule here is: What can reasonably be done with CSS over JavaScript, should be done with CSS over JavaScript. \$\endgroup\$ Jun 10 '14 at 16:21
2
\$\begingroup\$

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/

\$\endgroup\$
3
  • \$\begingroup\$ 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? \$\endgroup\$
    – RobinvdA
    Jun 10 '14 at 13:13
  • \$\begingroup\$ 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. \$\endgroup\$ Jun 10 '14 at 13:16
  • \$\begingroup\$ To who ever down-voted my answer, I've updated it given @RobinvdA's comment. \$\endgroup\$ Jun 10 '14 at 14:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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