【前端】jQuery 对数据进行正序排列

你可以使用 jQuery 对数据进行正序排列(按 jbsj 升序)。以下是完整的代码示例:

html 复制代码
<!DOCTYPE html>
<html>
<head>
    <title>按时间排序</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h2>排序前数据:</h2>
    <div id="original-data"></div>
    
    <h2>按 jbsj 正序排列:</h2>
    <div id="sorted-data"></div>

    <script>
        // 原始数据
        const data = [
            {
                "dsr": "A",
                "jbsj": "2025-04-27T09:18:24.000+0000",
                "qx": "1区"
            },
            {
                "dsr": "B",
                "jbsj": "2025-04-27T09:17:30.000+0000",
                "qx": "2区"
            },
            {
                "dsr": "C",
                "jbsj": "2025-04-27T09:17:18.000+0000",
                "qx": "2区"
            },
            {
                "dsr": "D",
                "jbsj": "2025-04-27T09:16:30.000+0000",
                "qx": "1区"
            }
        ];

        // 显示原始数据
        $('#original-data').append(JSON.stringify(data, null, 2));

        // 按 jbsj 正序排列
        const sortedData = data.sort((a, b) => {
            return new Date(a.jbsj) - new Date(b.jbsj);
        });

        // 显示排序后数据
        $('#sorted-data').append(JSON.stringify(sortedData, null, 2));
    </script>
</body>
</html>

关键点说明:

  1. 排序逻辑 :使用 JavaScript 的 sort() 方法,通过比较 jbsj 的日期对象来实现排序

    javascript 复制代码
    data.sort((a, b) => new Date(a.jbsj) - new Date(b.jbsj));
  2. 日期转换 :将 ISO 8601 格式的字符串 (2025-04-27T09:18:24.000+0000) 转换为 Date 对象进行比较

  3. 结果显示 :使用 JSON.stringify() 美化输出,方便查看结果

预期输出:

排序后的数据将按照时间从早到晚排列,第一个条目应该是 "D"(09:16:30),最后一个是 "A"(09:18:24)。

相关推荐
火车叼位几秒前
前端从代码完成到可交付之间还有什么
前端
SoonITer几秒前
esm 和 cjs 共用同一份类型 - 让 type 先 move to esm-only
前端·typescript·前端工程化
鸡米键盘2 分钟前
巧用 resolve.alias 优化构建产物:消除重复打包与提升 Tree Shaking 效果
前端
7ayl2 分钟前
原型链
前端
daydayupx10 分钟前
【前端学部署】第一篇: 几块钱部署一个有域名的静态网站
前端·后端
Spider_Man10 分钟前
从 "字符拼图" 到 "文字魔术":动态规划玩转字符串变形术
javascript·算法·leetcode
前端搬砖仔噜啦噜啦嘞11 分钟前
从0到1开发一款vscode插件
前端·javascript
汪子熙12 分钟前
计算机编程中的 Predicate 概念详解
前端
xianxin_12 分钟前
HTML 空格符
前端
baozj12 分钟前
🚀我靠!AI 帮我“摸鱼”摸成了腾讯开源组件库 TDesign 的贡献者!
前端·开源·github