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

时间:2015-06-04 12:05:02

标签: javascript jquery html-lists

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

如何才能使页面加载时带有最新日期的<li>位于顶部?

另外,我的代码非常长(约6000字)并包含外部来源(谷歌的api),但我知道如何将其实现到我的代码中。这里有一些伪代码来解释我如何将生成的内容生成到js / html中:

  • 我有一个<ul>元素,标签内没有任何内容
  • 我使用Google的API获取用户在过去5次上传的视频中的信息,此信息包括频道名称,视频标题,视频ID,缩略图网址以及视频的日期和时间发表于(一个ISO 8601格式的字符串)。
  • 接下来,此信息用于制作var(包括html标签和样式),例如:

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

  • 此代码通过2个函数添加。 1使用名为&#34; addUsers()&#34;的函数从localStorage获取信息。它本质上只是一个for循环,它从localstorage中获取密钥并将其用作var并通过参数将其解析为函数,该函数将其添加到&lt; ul&gt;名单。 2,它从文本字段输入中获取信息(同样点击按钮)激活函数&#34; addUserLocalStorage()&#34;它将用户名添加到localStorage,并在屏幕上显示youtube视频;在刷新时,它从addUsers()函数获取信息。

很明显,只需在我想要的任何地方添加publishedAt var就可以轻松实现,而不会有太多麻烦。但它更多的是关于我将如何实现它并使用它来帮助排序无序列表并使其有序。

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

3 个答案:

答案 0 :(得分:1)

我找到了一个名为TinySort的插件,它似乎正是我正在寻找的。如果我只是将我的日期字符串转换为unix时间码,它只需将它们从最低编号分类到最高编号即可。

答案 1 :(得分:0)

既然你正在使用jQuery,那么this会有用吗? Bill Richards对this blog post的评价。

编辑另外,您可能需要考虑使用data attribute在unix时间内进行排序。排序比分析文本更容易,更快捷。

答案 2 :(得分:-2)

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