如何使用jQuery在两个data-date属性值之间选择.date-grid元素？

没问题，我来帮你搞定这个需求！因为原生CSS属性选择器没法直接处理日期范围筛选，我们可以用jQuery的.filter()方法来实现这个功能，这里有两种靠谱的方案：

方案1：利用字符串直接比较（更简洁） #

你的data-date属性是标准的YYYY-MM-DD格式，这种格式的字符串字典序和时间顺序完全一致，所以可以直接做字符串范围判断，不用转成时间戳：

// 定义起始和结束日期字符串
const startDate = '2018-03-15';
const endDate = '2018-03-20';

// 筛选符合条件的元素
const $targetDates = $('.date-grid').filter(function() {
  const currentDate = $(this).data('date');
  // 判断当前日期是否在目标范围内
  return currentDate >= startDate && currentDate <= endDate;
});

方案2：转成时间戳比较（兼容性更强） #

如果担心后续日期格式可能有变动（比如出现非标准格式），可以把日期转成时间戳（毫秒数）来做数值比较，这种方法兼容性更广泛：

// 把起始和结束日期转成时间戳
const startTimestamp = new Date('2018-03-15').getTime();
const endTimestamp = new Date('2018-03-20').getTime();

// 筛选符合条件的元素
const $targetDates = $('.date-grid').filter(function() {
  const currentTimestamp = new Date($(this).data('date')).getTime();
  // 判断时间戳是否在目标范围内
  return currentTimestamp >= startTimestamp && currentTimestamp <= endTimestamp;
});

补充说明 #

• 两种方案都能实现需求，优先选方案1，代码更简洁，性能也更好；
• 筛选完成后，$targetDates就是所有符合日期范围的.date-grid元素集合，你可以直接对它进行后续操作（比如添加高亮样式、绑定点击事件等）。

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