我的div中有4个不同的日期我需要将活动颜色应用到最近的未来日期吗？

Question

我们这里有4个不同的日期

<div class="grid-item" data-date="2018-03-30"></div>
<div class="grid-item" data-date="2018-04-29"></div>
<div class="grid-item" data-date="2015-05-25"></div>
<div class="grid-item" data-date="2015-07-26"></div>

最近的日期应该是活动类，未来和旧日期应该是非活动类

例如

<div class="grid-item" data-date="2018-03-30"></div>

以上<div>应该是green颜色和其他3 divs应该是red颜色

<div class="grid-item" data-date="2018-04-29"></div>
<div class="grid-item" data-date="2015-05-25"></div>
<div class="grid-item" data-date="2015-07-26"></div>

我需要javascript或jquery片段才能执行此操作？

Javascript代码段

$(function() {
    var currentDate = Date.now();
    var a = new Date(currentDate);
    $(".grid-item").each(function() {
        var specifiedDate = $(this).data('date');
        var date = Date.parse(specifiedDate);
        var b = new Date(date);
        if (!isNaN(b) && b.getMonth() == a.getMonth() && b.getDay()== 
           a.getDay() && b.getYear() == a.getYear()) {
          $(this).addClass('today');
        }
        else if(!isNaN(b) && a - b > 0) {
            $(this).addClass('past');
        }
        else {
        $(this).addClass('future');
    }
});

});

CSS

.grid-item {
  height: 170px;
  width: 170px;
  float: left;
  background:red;
  margin:10px;
}

.past {
     background:black;
}

.future {
     background:blue;
}

Answer 1

您可以获取所有日期并将其存储在阵列中。

然后将类.red添加到所有.grid-item。使用div元素0过滤与日期相同的date。并删除类red添加类green

//Get the dates and sort it
var date = $(".grid-item").map(function(){ return $(this).data('date') }).get().sort(function(a,b){
    var f = function(d){[y,m,d] = d.split("-");return [y,m,d];}
    var t = new Date();
    return Math.abs( t.getTime() - new Date(...f(a)).getTime() ) - Math.abs( t.getTime() - new Date(...f(b)).getTime() );
});

//Assign Class
$(".grid-item").addClass('red').filter(function(){
    return $(this).data('date') === date[0];
}).removeClass('red').addClass('green');

.grid-item {
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

.green {
  background-color: green;
}

.red {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="grid-item" data-date="2018-03-30"></div>
<div class="grid-item" data-date="2018-04-29"></div>
<div class="grid-item" data-date="2015-05-25"></div>
<div class="grid-item" data-date="2015-07-26"></div>

---

如果您想根据内容定制订单，而divs内容只是日期，您可以：

//Get the dates and sort it
var date = $(".grid-item").map(function() {return $(this).text().trim()}).get().sort(function(a, b) {
  var f = function(d) {[y, m, d] = d.split("-");return [y, m, d];}
  var t = new Date();
  return Math.abs(t.getTime() - new Date(...f(a)).getTime()) - Math.abs(t.getTime() - new Date(...f(b)).getTime());
});

//Assign Class
$(".grid-item").addClass('red').filter(function() {
  return $(this).text().trim() === date[0];
}).removeClass('red').addClass('green');

.grid-item {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

.green {
  background-color: green;
}

.red {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="grid-item">2018-03-30</div>
<div class="grid-item">2018-04-29</div>
<div class="grid-item">2015-05-25</div>
<div class="grid-item">2015-07-26</div>

仅使用月和日（使用当前年份）

var date = $(".grid-item").map(function() {return $(this).text().trim()}).get().sort(function(a, b) {
  var f = function(d) {[m, d] = d.split("-");return [(new Date()).getFullYear(), m, d];}
  var t = new Date();
  return Math.abs(t.getTime() - new Date(...f(a)).getTime()) - Math.abs(t.getTime() - new Date(...f(b)).getTime());
});

//Assign Class
$(".grid-item").addClass('red').filter(function() {
  return $(this).text().trim() === date[0];
}).removeClass('red').addClass('green');