Question

您能否请看一下这个演示，让我知道如何根据日期顺序选择和应用class= "c-1" , class= "c-2",...这样的新课程到每个下一个日期？

＆＃13;

var todayDate = new Date().toISOString().slice(0, 10);

＆＃13;

div {
  height: 60px;
  background: #eee;
  border: 2px solid #fff;
}

.c-1 {
  background: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-date="2018-01-12"></div>
<div data-date="2018-01-22"></div>
<div data-date="2018-02-02"></div>
<div data-date="2018-02-07"></div>
<div data-date="2018-02-10"></div>
<div data-date="2018-02-15"></div>
<div data-date="2018-04-17"></div>
<div data-date="2018-05-11"></div>

＆＃13;

Answer 1

要实现此目的，您可以使用filter()检索日期大于今天的div，然后添加类。

假设您要列出3个下一个约会日期或更长时间，我是否必须重复此功能？

为此，您可以对上述slice()的结果使用filter()来获取最近的3个日期。

今天怎么样？我将您的代码更改为>= today以包含今天，但仍然会在今天之后列出日期

如果您想今天加入，则需要仅比较日期，删除时间。您可以使用setHours(0, 0, 0, 0)来均衡它们。试试这个：

var today = new Date().setHours(0, 0, 0, 0);
$('div').filter(function() {
  return new Date($(this).data('date')).setHours(0, 0, 0, 0) >=  today;
}).slice(0, 3).addClass('c-1');

div {
  background: #eee;
  padding: 2px;
  border: 2px solid #fff;
}

.c-1 {
  background: #C00;
  color: #FFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-date="2018-01-12">2018-01-12</div>
<div data-date="2018-01-22">2018-01-22</div>
<div data-date="2018-02-02">2018-02-02</div>
<div data-date="2018-02-07">2018-02-07</div>
<div data-date="2018-02-10">2018-02-10</div>
<div data-date="2018-02-15">2018-02-15</div>
<div data-date="2018-04-17">2018-04-17</div>
<div data-date="2018-05-11">2018-05-11</div>

请注意，我仅略微修改了CSS，因此在代码段中更容易看到结果。

如何从div的日期属性找到今天最接近的日期

1 个答案: