JS日期排序功能仅桌面生效，移动端失效问题求助

核心问题点 #

1. 代码执行时机错配：过期容器的隐藏逻辑写在DOMContentLoaded事件外部，会在排序、重排元素的代码执行前就运行。桌面端DOM加载快，可能刚好赶上正确时序，但移动端加载慢，这部分代码拿到的是未排序的原始元素，直接导致隐藏和排序逻辑都失效。
2. 排序逻辑反向：当前用timeA - timeB是升序（旧日期在前），但你要的是“日期越近越靠前”，得改成timeB - timeA实现降序。
3. 日期解析兼容性：部分移动端浏览器对非ISO标准的日期格式（比如DD/MM/YYYY）解析会出错，要确保data-time的值是YYYY-MM-DD这类标准格式。

修复后的完整代码 #

document.addEventListener('DOMContentLoaded', function () {
  // 获取容器并转成数组
  const divs = document.querySelectorAll('.container');
  const divArray = Array.from(divs);
  
  // 按日期降序排序（新日期在前）
  divArray.sort((a, b) => {
    const timeA = new Date(a.getAttribute('data-time'));
    const timeB = new Date(b.getAttribute('data-time'));
    return timeB - timeA;
  });
  
  // 清空网格并重新添加排序后的容器
  const grid = document.querySelector(".grid");
  grid.innerHTML = '';
  divArray.forEach(div => grid.appendChild(div));
  
  // 隐藏过期容器（必须在排序后执行）
  const currentDate = new Date();
  document.querySelectorAll(".container").forEach(item => {
    const itemDate = new Date(item.getAttribute("data-time"));
    // 用getTime()避免日期对象直接比较的兼容问题
    if (currentDate.getTime() > itemDate.getTime()) {
      item.remove();
    }
  });
});

额外验证步骤 #

• 检查所有.container的data-time属性，确保格式统一为ISO标准（比如2024-05-20），不要用20/05/2024这类格式。
• 用Chrome DevTools的设备模拟功能（或真机调试）查看移动端控制台，确认有没有日期解析失败的报错。
• 确认服务器不会给移动端返回不同的HTML结构，导致.grid或.container选择器找不到元素。

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