divの日付属性から今日に最も近い日付を見つける方法

debugcn 投稿 Dev

暖かい

このデモを見て、class= "c-1" , class= "c-2",...日付シーケンスに基づいたような新しいクラスを選択して、次の各日付に適用する方法を教えてください。

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

div {
  height: 60px;
  background: #eee;
  border: 2px solid #fff;
}

.c-1 {
  background: red;
}

<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>

ロリー・マクロサン

これを実現するに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を少しだけ修正したことに注意してください。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]