比较每个li给出的时间与当前时间

Question

What is this about ?

I am trying to check if the current time is less then or equal to the time given in particular span

---

What's the issue ?

I want to set timer for each li without page refresh to check if the time is equal to current time or time given in span is less then 2 second comparing with the current time. I am not sure what's the good practise to check this for individual li ?

---

Html

<ul>
    <li>
        <span class="hidden time">December 3 2015 21:58:00 UTC-0800</span>
    </li>
    <li>
        <span class="hidden time">December 12 2015 15:00:00 UTC-0800</span>
    </li>
</ul>

Answer 1

One counter would do just fine. You would want to set the interval to something less than 2 seconds and at each interval use the jQuery .filter() method to see if there're any spans with a time meeting the condition and then add the class.

 $(function() { var timer = setInterval(function() { var ts = Date.now(); $('.current').text( new Date(ts) ); $('ul > li > .hidden.time').filter(function() { var thisTime = new Date( $(this).text().trim() ); return thisTime - ts <= 2000; }) .addClass('active'); }, 1000); }); 

 .active { background: black; color: yellow; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div> Current Time: <span class="current"></span> </div> <ul> <li> <span class="hidden time">December 3 2015 21:58:00 UTC-0800</span> </li> <li> <span class="hidden time">December 12 2015 15:00:00 UTC-0800</span> </li> </ul>