Add different classes to divs with jQuery depending on the time in the div and current time?
<p>I am creating a little TV guide for myself and I have a list of programs from a TV channel that runs today. What I now try to do is to add three different CSS classes, one for the program that is currently on air (.present), one for shows before the current one (.past) and one for the shows after the current one (.future).</p>

<p>I get the current time with </p>

<pre><code>var d = new Date();
var curr_hour = d.getHours();
var curr_min = d.getMinutes();
for (var i = 2; i--; )
    curr_min[i] = ("0" + curr_min[i]).slice(-2);
var curr_time = curr_hour + ":" + curr_min;
</code></pre>

<p>The HTML looks something like:</p>

<pre><code>&lt;div class="title"&gt;15:00 - Show 1&lt;/div&gt;
&lt;div style="display: none;" class="description"&gt;Information about show 1.&lt;/div&gt;
&lt;div class="title"&gt;15:30 - Show 2&lt;/div&gt;
&lt;div style="display: none;" class="description"&gt;Information about show 2.&lt;/div&gt;
&lt;div class="title"&gt;16:00 - Show 3&lt;/div&gt;
&lt;div style="display: none;" class="description"&gt;Information about show 3&lt;/div&gt;
</code></pre>

<p>So if curr_time is 15:45 I want the div with Show 2 to have an extra class .present, the div with show 1 the extra class .past and the div with Show 3 the extra class .future. So, something like:</p>

<pre><code>&lt;div class="title past"&gt;15:00 - Show 1&lt;/div&gt;
&lt;div style="display: none;" class="description"&gt;Information about show 1.&lt;/div&gt;
&lt;div class="title present"&gt;15:30 - Show 2&lt;/div&gt;
&lt;div style="display: none;" class="description"&gt;Information about show 2.&lt;/div&gt;
&lt;div class="title future"&gt;16:00 - Show 3&lt;/div&gt;
&lt;div style="display: none;" class="description"&gt;Information about show 3&lt;/div&gt;
</code></pre>

<p>How can I achieve this with jQuery?</p>
