jquery ul li 按照时间排序
来源:互联网 发布:国外教育学专业 知乎 编辑:程序博客网 时间:2024/06/01 09:15
在公司运营、维护游戏期间,对于游戏首页来说,需要展现关于游戏的新闻、资讯、活动。最近提出新需求,需要对这些信息打乱分类后按照时间的先后,展现最新的几条记录。
由于之前的模板都是开发好的,如果要实现这个功能的话,开发周期会延长。为了方便,小编直接把之前最好的分类提取出来,然后进行排序,最后在填充进相对应的ul标签中。
(1)演示模拟数据
<div class="ul_sort"> <ul> <li> <a href="#" target="_blank"><p>【新闻】新闻1</p></a> <span>2016-01-01</span> </li> <li> <a href="#" target="_blank"><p>【新闻】新闻2</p></a> <span>2016-01-05</span> </li> <li> <a href="#" target="_blank"><p>【资讯】资讯1</p></a> <span>2016-01-02</span> </li> <li> <a href="#" target="_blank"><p>【资讯】资讯2</p></a> <span>2015-01-06</span> </li> <li> <a href="#" target="_blank"><p>【活动】活动1</p></a> <span>2016-01-03</span> </li> <li> <a href="#" target="_blank"><p>【活动】活动2</p></a> <span>2016-01-07</span> </li> </ul> </div>
(2)相关js代码
<script type="text/javascript" src="js/jquery.js"></script><script> var ul = $(".ul_sort ul"); var lis = []; lis = $(".ul_sort ul li"); var ux = []; //循环提取时间,并调用排序方法进行排序 for (var i=0; i<lis.length; i++){ var tmp = {}; tmp.dom = lis.eq(i); tmp.date = new Date(lis.eq(i).find("span").eq(0).html().replace(/-/g,'/')); ux.push(tmp); } //数组排序,支持年的比较 ux.sort(function(a,b){ var myDate = new Date(); var year = myDate.getYear(); if(a.date.getYear < year && b.date.getYear == year){ return true; } return b.date - a.date; }); //移除原先顺序错乱的li内容 $('.ul_sort ul li').remove(); //重新填写排序好的内容 for (var i=0; i<ux.length; i++){ ul.append(ux[i].dom); }</script>
(3)效果展现
0 0
- jquery ul li 按照时间排序
- jquery ul li 操作
- ul li列表排序
- jquery ul li 遍历案例
- jquery ul li左右拖动
- jquery中ul > li是什么意思?
- jquery中按照商品价格给li标签排序的方法
- jQuery里 $("ul > li") 跟 $("ul li") 的区别
- 使用原生js和jquery 对 ul 中的li进行随机排序
- jQuery 遍历ul li 添加 移除
- jQuery ul li实现动态广告
- jquery的ul、li标签做菜单
- jquery 动态为ul添加li
- jquery获取ul中li的值
- jquery-ul-li实现分页功能
- ul li 排序 移动 非常简单
- ul li
- 按照时间排序
- CodeForces 66B - Petya and Countryside(水题)
- php中\r \r\n \t的区别
- 加载数据
- JAVA内部类使用,什么时候该使用内部类及使用内部类的好处
- 如何用Latex合并两个pdf
- jquery ul li 按照时间排序
- 内存四区_栈区_堆区
- Android TV开发之监听网线,WiFi,蓝牙,U盘的状态
- FJNU 1199 火柴棒(贪心)
- 二级联动选项
- Android 使用socket实现两个真机之间的通信
- ajax分页查询处理
- Servlet实现网页访问次数
- artTemplate-3.0