js根据时间给列表排序

最新推荐文章于 2024-06-25 09:09:51 发布

前端-文龙刚

最新推荐文章于 2024-06-25 09:09:51 发布

阅读量395

点赞数 2

分类专栏： Javascript 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_17211063/article/details/128326007

版权

Javascript 专栏收录该内容

86 篇文章 1 订阅

订阅专栏

最终效果：

具体代码：

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>jQuery按时间排序（原创）-jq22.com</title>
		<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
		<style>
			*{margin:0;padding:0;list-style-type:none;}	
			li{margin-top:20px;}
		</style>
	</head>

	<body>
		<h3>以下内容经过排序后的结果，可对比左侧html内数据</h3>
		<div class="ul_sort">
			<ul>
				<li>
					<a href="###">
						<p>【新闻】新闻1</p>
					</a>
					<span>2018-07-11 16:40</span>
				</li>
				<li>
					<a href="###">
						<p>【新闻】新闻2</p>
					</a>
					<span>2019-07-10 16:30</span>
				</li>

				<li>
					<a href="###">
						<p>【新闻】新闻4</p>
					</a>
					<span>2018-07-11 16:50</span>
				</li>
				<li>
					<a href="###">
						<p>【新闻】新闻5</p>
					</a>
					<span>2018-07-13 16:55</span>
				</li>
				<li>
					<a href="###">
						<p>【新闻】新闻3</p>
					</a>
					<span>2018/07/12 17:50</span>
				</li>
				<li>
					<a href="###">
						<p>【新闻】新闻6</p>
					</a>
					<span>2018/07/13 10:50</span>
				</li>

			</ul>

		</div>

		<script>
			$(function() {
				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 myData = new Date();
					var year = myData.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>

	</body>

</html>