Add different classes to divs with jQuery depending on the time in the div and current time? -


I am making a small TV guide for myself and I have a list of programs from a TV channel that runs today . Now what I try to do, is to add three different CSS classes, for a program which is currently on air (.present), before a show (.post) for a present and a present For later shows (future.)

At the present time I

  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]). Piece (-2); Var curr_time = curr_hour + ":" + curr_min;  

HTML looks like this:

  & lt; Div class = "title" & gt; Show 15: 00 - 1 & lt; / Div & gt; & Lt; Div style = "display: none;" Class = "description" & gt; Information about the 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;  

So if curr_time is 15:45, then I want div to show an additional class with div. Sponsor, div 1 additional class with show. Show the piston and div 3 Additional class. Future then, something like this:

  & lt; Div class = "title past" & gt; 15: 00 - Show 1 & lt; / Div & gt; & Lt; Div style = "display: none;" Class = "description" & gt; Information about the show 1. & Lt; / Div & gt; & Lt; Div class = "present 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 future" & gt; 16: 00 - Show 3 & lt; / Div & gt; & Lt; Div style = "display: none;" Class = "description" & gt; Information about show 3 & lt; / Div & gt;  

How can I get it with jQuery?

Get the loop element, time and add a class based on it:

  before = 'present'; $ ($ ('.title'). (). Reverse ()). Each (function () {var time = $ (this) .html (); time = time.substr (0, time.indexOf ('')); if (time & lt; = curr_time) {$ (this) AddClass (first); = 'past' ;; else {$ (this) .addClass ('future';}});  

edit:

code To get the present class in the right place, it was turned into a loop in reverse.


Comments