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

最新推荐文章于 2025-08-04 10:59:30 发布

原创最新推荐文章于 2025-08-04 10:59:30 发布 · 529 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #jquery #javascript

软件开发专栏收录该内容

88 篇文章

订阅专栏

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

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

关键点说明：

排序逻辑：使用 JavaScript 的 sort() 方法，通过比较 jbsj 的日期对象来实现排序
```
data.sort((a, b) => new Date(a.jbsj) - new Date(b.jbsj));
```
日期转换：将 ISO 8601 格式的字符串 (2025-04-27T09:18:24.000+0000) 转换为 Date 对象进行比较
结果显示：使用 JSON.stringify() 美化输出，方便查看结果