Finding image by date

Question

I have 12 games that I need to sort through that each have a date and img string. I'm fairly new to jQuery and was wondering what is the best way to accomplish this. Is there a way that I can run this through a loop of some sort rather than having 12 else-if statements like I currently have (code condensed to 3 for readability)? This code works, I was just looking for the cleaner more concise way of writing it.

var now = new Date();
boise = { date: new Date ('May 15, 2012'), img: 'Boise' };
central = { date: new Date ('May 21, 2012'), img: 'Central' };
notreDame = { date: new Date ('May 27, 2012'), img: 'NotreDame' };
    ...
banner = $('#nextGameBanner');
imgDir = 'images/nextGame';


if (now < boise.date ) {
    banner.attr('src', imgDir+boise.img+'.jpg');
}
else if (now < central.date) {
    banner.attr('src', imgDir+central.img+'.jpg');
}
else if (now < notreDame.date) {
    banner.attr('src', imgDir+notreDame.img+'.jpg');
}
    ...

HTML

<img src="/website/images/nextGame.jpg" id="nextGameBanner" />

Answer 1

Try something like this:

if (now.getTime() < boise.date.getTime() ) {
    banner.attr('src', imgDir+boise.img+'.jpg');
}
.....

In total,

var now = new Date();
    objs = { 
        // here I change your 12 variables to a single object, so I can loop over them
        boise : { date: new Date ('May 15, 2012'), img: 'Boise' },
        central : { date: new Date ('May 21, 2012'), img: 'Central' },
        notreDame : { date: new Date ('May 27, 2012'), img: 'NotreDame' }
    },
    banner = $('#nextGameBanner'),
    imgDir = 'images/nextGame';

// making loop with objs

$.each(objs, function(key, singleObj) { 
   // compare time with now and stored time in object
   if (now.getTime() < singleObj.date.getTime() ) {
     // assigning src to image when the condition satisfied
     banner.attr('src', imgDir+ singleObj.img +'.jpg');
     break; // stop the loop when match found
   }
});

​ read about getTime()