如何为div内最近的未来日期添加active类，其余设为inactive类？

我来帮你解决这个给最近未来日期添加激活样式的问题，下面是完整的实现方案：

• 先提取所有目标元素的日期信息，转换为可比较的日期对象
• 过滤出所有当前及未来的日期，排除已过期的日期
• 在未来日期中筛选出最近的那一个
• 给最近的未来日期添加active类，其余所有元素（包括过期日期和其他未来日期）添加inactive类

1. 基础HTML（你的原始结构整理） #

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

2. 样式定义（自定义激活/非激活状态） #

/* 基础网格项样式，可根据需求调整 */
.grid-item {
  width: 100px;
  height: 100px;
  border: 1px solid #ddd;
  margin: 8px;
  display: inline-block;
  border-radius: 4px;
}

/* 激活状态样式（最近的未来日期） */
.grid-item.active {
  background-color: #2ecc71;
  border-color: #27ae60;
}

/* 非激活状态样式（过期/非最近的未来日期） */
.grid-item.inactive {
  background-color: #ecf0f1;
  border-color: #bdc3c7;
}

3. JavaScript逻辑实现 #

// 获取所有网格项元素
const gridItems = document.querySelectorAll('.grid-item');
// 初始化当前日期，清零时间部分避免比较误差
const today = new Date();
today.setHours(0, 0, 0, 0);

// 存储未来日期的元素及对应日期对象
const futureDateItems = [];

// 遍历所有元素，筛选未来日期
gridItems.forEach(item => {
  const dateStr = item.dataset.date;
  const itemDate = new Date(dateStr);
  itemDate.setHours(0, 0, 0, 0); // 统一清零时间，只比较日期

  if (itemDate >= today) {
    futureDateItems.push({ element: item, date: itemDate });
  }
});

// 处理样式添加逻辑
if (futureDateItems.length > 0) {
  // 按日期从小到大排序，第一个就是最近的未来日期
  futureDateItems.sort((a, b) => a.date - b.date);
  const nearestItem = futureDateItems[0].element;

  // 先给所有元素添加非激活类
  gridItems.forEach(item => item.classList.add('inactive'));
  // 给最近的未来日期替换为激活类
  nearestItem.classList.remove('inactive');
  nearestItem.classList.add('active');
} else {
  // 所有日期都过期时，统一添加非激活类
  gridItems.forEach(item => item.classList.add('inactive'));
}

• 时间清零：必须把日期对象的时/分/秒/毫秒清零，否则会出现「当天下午的时间判定当天日期为过去」的错误
• 排序逻辑：日期对象直接相减会返回时间戳差值，用这个差值排序可以快速找到最近的未来日期
• 样式优先级：先统一添加inactive类，再给目标元素替换active类，避免样式冲突

内容的提问来源于stack exchange，提问作者user2490603