jquery - 使用 jQuery 根据 div 中的时间和当前时间向 div 添加不同的类？

Question

我正在为自己创建一个小电视指南，并且我有一个今天运行的电视 channel 的节目列表。我现在尝试做的是添加三种不同的 CSS 类，一种用于当前正在播出的节目 (.present)，一种用于当前节目之前的节目 (.past)，一种用于当前节目之后的节目 (.past)。 future )。

我通过

获取当前时间

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;

HTML 看起来像这样:

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

因此，如果 curr_time 为 15:45，我希望 Show 2 的 div 具有额外的类 .present，show 1 的 div 具有额外的类 .past，Show 3 的 div 具有额外的类 .future。所以，类似于:

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

如何使用 jQuery 实现此目的？

Answer 1

循环遍历元素，获取时间并基于该时间添加一个类:

var before = 'present';
$($('.title').get().reverse()).each(function(){
  var time = $(this).html();
  time = time.substr(0, time.indexOf(' '));
  if (time <= curr_time) {
    $(this).addClass(before);
    before = 'past';
  } else {
    $(this).addClass('future');
  }
});

编辑:

将代码更改为反向循环，以在正确的位置获取present类。