Javascript实现最新文章显示New图标

发布时间：2011年10月28日 / 分类：JavaScript / 13,720 次浏览 / 评论

这里说的最新文章指的是列表中的前几篇文章。这篇文章以ul列表为例，通过javascript程序处理，在最新的几篇文章标题后显示new图标。

先来看看效果：

程序引用了Jquery类库，以方便操作。

其实原理很简单，就是找到ul列表中的前几个项目，然后在li标签中查找a标签，在a标签后添加图标。

还是看程序来得实在：

<html>
<head><title>Javascript实现最新文章显示New标志</title>
<style type="text/css">
ul{list-style:none;}
ul li{line-height:26px;}
ul li i{margin-left:10px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function ShowListLatestIcon(latestnum){
	// 获取全部包含class的值为'showlatesticon'的ul列表
	var leftnewslist = jQuery("ul.showlatesticon").find("li");

	// 要插入到列表条目中的图片标志
	var latestimg="&nbsp;&nbsp;<img src='new.png' width='24' height='24' border='0' />";

	if(leftnewslist.length>0){
		var j=0;

		// 遍历li列表，前latestnum个显示new图标
		jQuery.each(leftnewslist, function(i, n){
			if(j>=latestnum){
				return;
			}

			jQuery(this).find("a").after(latestimg);
			j++;
		});
	}
}

jQuery(document).ready(function(){
ShowListLatestIcon(3);
});
</script>
</head>
<body>
<ul class="showlatesticon">
<li><a href="" target="_blank"  mon="ct=1&a=2&c=top">俄罗斯专家爆料：卡扎菲还活着 死者是其替身</a><i>11:05</i></li>
<li><a href="" target="_blank"  mon="ct=1&a=2&c=top">中国上万家民营加油站出现柴油断供现象</a><i>15:16</i></li>
<li><a href="" target="_blank"  mon="ct=1&a=2&c=top">广州地铁屏蔽门突然爆裂 工作人员称为自然裂痕</a><i>16:06</i></li>
<li><a href="" target="_blank"  mon="ct=1&a=2&c=top">国家统计局网站惊现校对版报告 3千字删改42处</a><i>12:16</i></li>
<li><a href="" target="_blank"  mon="ct=1&a=2&c=top">深圳拟设10月28为“男性关爱日”可放假半天</a><i>15:01</i></li>
<li><a href="" target="_blank"  mon="ct=1&a=2&c=top">媒体曝摩纳哥王妃欲离婚 诞下一子可获5亿美元</a><i>12:04</i></li>
<li><a href="" target="_blank"  mon="ct=1&a=2&c=top">深圳宝安区1岁半女童被货车前后轮碾压死亡(图)</a><i>14:29</i></li>
<li><a href="" target="_blank"  mon="ct=1&a=2&c=top">河南重刑犯豫北监狱越狱 监狱号称全河南最健全</a><i>11:44</i></li>
<li><a href="" target="_blank"  mon="ct=1&a=2&c=top">中宣部举办党的十七届六中全会精神研讨班</a><i>13:01</i></li>
</ul>
</body>
</html>

代码中作了注释，是不是很简单？

可以将ShowListLatestIcon这个函数放到一个单独的js文件里，以后只要需要用到这个功能，就添加这个js文件的引用。然后给ul添加class:showlatesticon。然后在页面加载的时候调用ShowListLatestIcon就OK了。

当然这只是个例子，可能不适合你的需求，但是如果搞明白原理，改改就能用了。

最后欢迎有问题的朋友留言交流。

附源程序下载。

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自波斯马，原文地址《Javascript实现最新文章显示New图标》

关键字: new图标 ul列表最新文章