CODEWITHSUNDEEP
javascriptjquerycoding-styleiteration
Pedro
Pedro

Reputation: 474

A better loop with jquery?

I'm doing this in javascript and just wondering if it can be solved more elegantly using more jquery?

var tbl="";
    for(var i=1; i<13; i++) {
        // creating 12 div's, one for each month
        tbl += "<div class='month' id='m"+i+"'>" + months[i-1];

        // creating 31 divs for each day in month
        for(var j=1; j<32; j++) { 
            tbl += "<div class='monthday' id='m"+i+"d"+j+"'>"+
                        "<div class='date_header'>"+j+"</div>" +
                        "<div class='date_info'></div>" +
                   "</div>";
        }
        // close month-div
        tbl += "</div>";

        // insert a clear for each 4th month to get a nice style-break
        if(i==4 || i==8 || i==12) {
            tbl += "<br style='clear: both'>";
        }
    }

    // finished
    $("#friendsinfo").html(tbl);

Upvotes: 2

Views: 426

Answers (4)

BadHorsie
BadHorsie

Reputation: 14544

Things you must remember when making a calendar:

  1. Each month has a different number of days.

  2. February has 29 days during leap years.

  3. To calculate a leap year is more complicated than most people realise. Years divisible by 4 are leap years. However, years that are evenly divisible by 100 are not leap years, unless they are also evenly divisible by 400.

If you want to write your own code, there isn't much that using jQuery will do to actually cut down on the number of loops that you have to use. However, I would suggest you get rid of this part:

// insert a clear for each 4th month to get a nice style-break
if(i==4 || i==8 || i==12) {
    tbl += "<br style='clear: both'>";
}

Use good CSS to make the rows clear properly, or use a table instead (which may actually be more appropriate in this case).

In any case, you may actually want to take a look at the jQuery datepicker UI component. I have used it a lot, and it works very well. Obviously this depends on whether or not you actually need a datepicker, or are just trying to show a full yearly calendar for a schedule or something.

http://jqueryui.com/demos/datepicker/

Alternatively, if you just need to display a full calendar, have a look around for an existing script. This kind of thing will have been done a thousand times already by other people, so there is little point reinventing the wheel.

e.g. Try here: http://www.jsmadeeasy.com/javascripts/Calendars/list_test.asp

One final thought is that it could be more efficient to output the calendar with PHP or whatever language you are using, and make the div hidden using CSS. Then just have the javascript show/hide the calendar rather than building it all every time.

Upvotes: 2

Eugene
Eugene

Reputation: 11270

Making html-markup using string concatenation isn't a good jquery-like idea =)

I'd prefer to make HTML template for this calendar and fill it with data. You may use jQuery Template plugin for this (link to plugin page from jquery.com)

If in some time later you will be needed to change your markup, it will more difficult to change lots of string than one html template.

Upvotes: 1

Mike Thomsen
Mike Thomsen

Reputation: 37506

Look up jQuery Templates. They allow you to do what you're doing without the fuss of manually concatenating strings in a loop like that. This is an example of how it works:

var template = '<a href="${link}" id="{$id}">${anchor}</a>';
$.template('myTemplate', template);
var data = [];
for (var x = 0; x < something.length; x++) {
    var newLink = {
        link: something[x].url,
        id: 'mylink-' + something[x].id,
        anchor: something[x].title
    };
    data.push(newLink);
}

$.tmpl('myTemplate', data).appendTo('#myContainer');

I've been using them for a few projects and they've done wonders for building complex blocks of HTML.

Upvotes: 4

Wintermute
Wintermute

Reputation: 3045

Modulus operator. Instead of:

if(i==4 || i==8 || i==12) {

you can do:

if (i%4){

Also, string concatenation is slow. I think it's faster to add your HTML strings to an array and join() them. Might be wrong :)

Upvotes: 1

Related Questions