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打造最佳用户体验的登录页面的实现代码
Jul 08 Javascript
判断复选框是否被选中的两种方法
Jun 04 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
Jun 16 Javascript
jquery实现华丽的可折角广告代码
Sep 02 Javascript
jQuery通过ajax快速批量提交表单数据
Oct 25 Javascript
bootstrap输入框组件使用方法详解
Jan 19 Javascript
基于node.js实现微信支付退款功能
Dec 19 Javascript
mint-ui 时间插件使用及获取选择值的方法
Feb 09 Javascript
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
基于JavaScript实现大文件上传后端代码实例
Aug 18 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
Sep 01 Javascript
javascript实现京东快递单号的查询效果
Nov 30 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连接数据库代码应用分析
2011/05/29 PHP
PHP中的插件机制原理和实例
2014/07/08 PHP
PHP开发框架kohana3 自定义路由设置示例
2014/07/14 PHP
php返回当前日期或者指定日期是周几
2015/05/21 PHP
CodeIgniter自定义控制器MY_Controller用法分析
2016/01/20 PHP
PHP 记录访客的浏览信息方法
2018/01/29 PHP
php中try catch捕获异常实例详解
2020/08/06 PHP
网站页面自动跳转实现方法PHP、JSP(上)
2010/08/01 Javascript
js键盘事件的keyCode
2014/07/29 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
2015/06/26 Javascript
学习javascript面向对象 理解javascript对象
2016/01/04 Javascript
JavaScript中闭包之浅析解读(必看篇)
2016/08/25 Javascript
基于JavaScript实现熔岩灯效果导航菜单
2017/01/04 Javascript
基于JavaScript定位当前的地理位置
2017/04/11 Javascript
深入理解nodejs中Express的中间件
2017/05/19 NodeJs
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
2017/07/09 Javascript
JS获取当前地理位置的方法
2017/10/25 Javascript
原生js实现移动端触摸轮播的示例代码
2017/12/22 Javascript
微信小程序项目实践之主页tab选项实现
2018/07/18 Javascript
JavaScript 处理树数据结构的方法示例
2019/06/16 Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
2019/07/25 Javascript
layui表格分页 记录勾选的实例
2019/09/02 Javascript
JS深入学习之数组对象排序操作示例
2020/05/01 Javascript
通过JS判断网页是否为手机打开
2020/10/28 Javascript
[39:11]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第二局
2016/02/28 DOTA
python检测lvs real server状态
2014/01/22 Python
python爬虫基础教程:requests库(二)代码实例
2019/04/09 Python
十个Python练手的实战项目,学会这些Python就基本没问题了(推荐)
2019/04/26 Python
解决TensorFlow程序无限制占用GPU的方法
2020/06/30 Python
CSS3 transition 实现通知消息轮播条
2020/10/14 HTML / CSS
澳大利亚领先的优质葡萄酒拍卖会:Langton’s Fine Wines
2019/03/24 全球购物
法学个人求职信范文
2014/01/27 职场文书
2014法院干警廉洁警示教育思想汇报
2014/09/13 职场文书
隐形的翅膀观后感
2015/06/10 职场文书
解决python存数据库速度太慢的问题
2021/04/23 Python
react中props 的使用及进行限制的方法
2021/04/28 Javascript