jquery nth-child()选择器的简单应用


Posted in Javascript onJuly 10, 2010

通过网上咨询使用这个选择器便很容易的解决。特此记录一下。
下面是主要的代码
js脚本:

<script type="text/javascript"> 
$(document).ready( 
function () { 
//每隔五行给li加一个样式 
$('.article_li li:nth-child(5n)').addClass('liborder'); 
$('.article_li li:last').addClass('liborder'); 
} 
); 
</script>

html代码:
<ul class="article_li"> 
<li> 
<label class="datename"> 
<span>2010-06-12 08:37:59 </span> 
</label> 
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物业税:长沙暂不试点物业税:长沙暂不试点</a> 
</li> 
<li> 
<label class="datename"> 
<span>2010-06-12 08:37:59 </span> 
</label> 
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物业税:长沙暂不试点</a> </li> 
<li> 
<label class="datename"> 
<span>2010-06-12 08:37:59 </span> 
</label> 
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物业税:长沙暂不试点</a> </li> 
<li> 
<label class="datename"> 
<span>2010-06-12 08:37:59 </span> 
</label> 
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物业税:长沙暂不试点</a> </li> 
<li> 
<label class="datename"> 
<span>2010-06-12 08:37:59 </span> 
</label> 
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物业税:长沙暂不试点</a> </li> 
<li> 
<label class="datename"> 
<span>2010-06-12 08:37:59 </span> 
</label> 
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物业税:长沙暂不试点</a> </li> 
<li> 
<label class="datename"> 
<span>2010-06-12 08:37:59 </span> 
</label> 
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物业税:长沙暂不试点</a> </li> 
<li> 
<label class="datename"> 
<span>2010-06-12 08:37:59 </span> 
</label> 
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物业税:长沙暂不试点</a> </li> 
<li> 
<label class="datename"> 
<span>2010-06-12 08:37:59 </span> 
</label> 
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物业税:长沙暂不试点</a> </li> 
<li> 
<label class="datename"> 
<span>2010-06-12 08:37:59 </span> 
</label> 
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物业税:长沙暂不试点</a> </li> 
<li> 
<label class="datename"> 
<span>2010-06-12 08:37:59 </span> 
</label> 
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物业税:长沙暂不试点</a> </li> 
<li> 
<label class="datename"> 
<span>2010-06-12 08:37:59 </span> 
</label> 
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物业税:长沙暂不试点</a> </li> 
<li> 
<label class="datename"> 
<span>2010-06-12 08:37:59 </span> 
</label> 
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物业税:长沙暂不试点</a> </li> 
<li> 
<label class="datename"> 
<span>2010-06-12 08:37:59 </span> 
</label> 
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物业税:长沙暂不试点</a> </li> 
<li> 
<label class="datename"> 
<span>2010-06-12 08:37:59 </span> 
</label> 
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物业税:长沙暂不试点</a> </li> 
<li> 
<label class="datename"> 
<span>2010-06-12 08:37:59 </span> 
</label> 
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物业税:长沙暂不试点</a> </li> 
<li> 
<label class="datename"> 
<span>2010-06-12 08:37:59 </span> 
</label> 
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物业税:长沙暂不试点</a> </li> 
<li> 
<label class="datename"> 
<span>2010-06-12 08:37:59 </span> 
</label> 
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物业税:长沙暂不试点</a> </li> 
<li> 
<label class="datename"> 
<span>2010-06-12 08:37:59 </span> 
</label> 
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物业税:长沙暂不试点</a> </li> 
<li> 
<label class="datename"> 
<span>2010-06-12 08:37:59 </span> 
</label> 
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物业税:长沙暂不试点</a> </li> 
<li> 
<label class="datename"> 
<span>2010-06-12 08:37:59 </span> 
</label> 
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物业税:长沙暂不试点</a> </li> 
<li> 
<label class="datename"> 
<span>2010-06-12 08:37:59 </span> 
</label> 
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物业税:长沙暂不试点</a> </li> 
<li> 
<label class="datename"> 
<span>2010-06-12 08:37:59 </span> 
</label> 
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物业税:长沙暂不试点</a> </li> 
</ul>

具体的用法这里就不写了,大家可以参考
https://3water.com/css/28294.html 
https://3water.com/article/23617.htm
效果图如下:
jquery nth-child()选择器的简单应用
Javascript 相关文章推荐
jQuery快速上手:写jQuery与直接写JS的区别详细解析
Aug 26 Javascript
深入理解JavaScript中的传值与传引用
Dec 09 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
Mar 18 Javascript
按钮接受回车事件的三种实现方法
Jun 06 Javascript
jQuery+css实现炫目的动态块漂移效果
Jan 28 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
May 07 Javascript
基于VUE选择上传图片并页面显示(图片可删除)
May 25 Javascript
Node 自动化部署的方法
Oct 17 Javascript
vue中的event bus非父子组件通信解析
Oct 27 Javascript
微信小程序文章详情页跳转案例详解
Jul 09 Javascript
vue键盘事件点击事件加native操作
Jul 27 Javascript
浅谈node.js中间件有哪些类型
Apr 29 Javascript
SWFObject 2.1以上版本语法介绍
Jul 10 #Javascript
加载jQuery后$冲突的解决办法
Jul 09 #Javascript
在javascript将NodeList作为Array数组处理的方法
Jul 09 #Javascript
jquery multiSelect 多选下拉框
Jul 09 #Javascript
IE8 chrome中table隔行换色解决办法
Jul 09 #Javascript
jQuery EasyUI NumberBox(数字框)的用法
Jul 08 #Javascript
JSON.parse 解析字符串出错的解决方法
Jul 08 #Javascript
You might like
php面向对象全攻略 (五) 封装性
2009/09/30 PHP
PHP数组的交集array_intersect(),array_intersect_assoc(),array_inter_key()函数的小问题
2011/05/29 PHP
php设计模式 DAO(数据访问对象模式)
2011/06/26 PHP
深入理解curl类,可用于模拟get,post和curl下载
2013/06/08 PHP
php 注册时输入信息验证器的实现详解
2013/07/05 PHP
php去除字符串换行符示例分享
2014/02/13 PHP
PHP+apc+ajax实现的ajax_upload上传进度条代码
2016/01/25 PHP
由php中字符offset特征造成的绕过漏洞详解
2017/07/07 PHP
DOM精简教程
2006/10/03 Javascript
js形成页面的一种遮罩效果实例代码
2014/01/04 Javascript
js实现类似jquery里animate动画效果的方法
2015/04/10 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
2016/02/24 Javascript
非常酷炫的Bootstrap图片轮播动画
2016/05/27 Javascript
JavaScript动态检验密码强度的实现方法
2016/11/09 Javascript
基于jQuery实现火焰灯效果导航菜单
2017/01/04 Javascript
Ionic + Angular.js实现验证码倒计时功能的方法
2017/06/12 Javascript
vue ssr 指南详读
2018/06/29 Javascript
Vue触发隐藏input file的方法实例详解
2019/08/14 Javascript
Vue项目实现换肤功能的一种方案分析
2019/08/28 Javascript
[51:22]Fnatic vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
从零学python系列之数据处理编程实例(二)
2014/05/22 Python
使用python实现省市三级菜单效果
2016/01/20 Python
Python使用PIL库实现验证码图片的方法
2016/03/11 Python
python shell根据ip获取主机名代码示例
2017/11/25 Python
python 多线程串行和并行的实例
2019/02/22 Python
python使用pymongo与MongoDB基本交互操作示例
2020/04/09 Python
django 解决model中类写不到数据库中,数据库无此字段的问题
2020/05/20 Python
旅游安全协议书
2014/04/21 职场文书
故宫英文导游词
2015/01/31 职场文书
中考学习决心书
2015/02/04 职场文书
英语通知范文
2015/04/22 职场文书
2016年寒假学习心得体会
2015/10/09 职场文书
学习《中小学教师职业道德规范》心得体会
2016/01/18 职场文书
关于拾金不昧的感谢信(五篇)
2019/10/18 职场文书
Redis如何实现分布式锁
2021/08/23 Redis
MySQL七大JOIN的具体使用
2022/02/28 MySQL