如何按日期时间对 <ul> 列表进行排序？

Question

我有一个 <ul> 列表，它是在页面加载时使用 javascript 生成的（通过将带有 <li> 标记的 var 附加到 <ul> 元素）。

我怎样才能使具有最新日期的 <li> 在页面加载时位于顶部？

此外，我的代码非常长（约 6000 字）并且包括外部资源（到 google 的 api），但我知道如何将其实现到我的代码中。这里有一些 pseudo-code 来解释我如何将生成的东西放入 js/html:

我有一个 <ul> 元素，标签内没有任何内容
我使用 google 的 API 从 youtube 获取用户最近上传的 5 个视频的信息，这些信息包括频道名称、视频标题、视频 ID、缩略图 URL，以及视频发布的日期和时间（ISO 8601 格式的字符串）。
接下来，此信息用于制作 var（其中包括 html 标签和样式），例如：

var output = '<li><p>'+VideoTitle+'</p><p>'+publishedAt+'</p>\
              <img src="'+videoThumbnail+'" height="90px"></li>'

此代码是通过 2 个函数添加的。 1 使用名为 "addUsers()" 的函数从 localStorage 获取信息，该函数本质上只是一个 for 循环，它从 localstorage 获取密钥并将其用作 var，并通过参数将其解析为函数，该函数将其添加到 < ul > 列表。 2 它从文本字段输入获取信息（也单击按钮）激活函数 "addUserLocalStorage()" 将用户名添加到 localStorage，并且还在屏幕上显示 youtube 视频；刷新时，它从 addUsers() 函数获取信息。

所以很明显，只需在元素中我想要的任何地方添加 publishedAt var 就非常容易，没有太多麻烦。但更多的是关于我将如何实现它并使用它来帮助对无序列表进行排序并使其有序。

像往常一样欢迎任何建议:)

Answer 1

您无法对（无序列表）上的数据进行排序，您需要在每次页面加载时使用 javascript 或 jquery 对数据进行排序，然后将排序后的数据放入元素中。

Answer 2

因为您使用的是 jQuery 可能 this will help? Which credits Bill Richards for this blog post.

编辑： 此外，您可能需要考虑使用 data attribute 在 unix 时间中按 - 排序。与必须解析文本相比，这更容易、更快地进行排序。

Answer 3

我找到了一个名为 TinySort 的插件，它似乎完全符合我的要求。如果我只是将日期字符串转换为 unix 时间码，只需将它们从最低到最高排序即可。

How do I sort a <ul> list by datetime?