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
原创粉丝点击