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 相关文章推荐
JavaScript 中的replace方法说明
Apr 13 Javascript
Jquery数独游戏解析(一)-页面布局
Nov 05 Javascript
Jquery实现搜索框提示功能示例代码
Aug 13 Javascript
$.each与$().each的区别示例介绍
Mar 20 Javascript
JS判断是否长按某一键的方法
Mar 02 Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
Apr 13 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
May 25 Javascript
五步轻松实现zTree的使用
Nov 01 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
vue项目中使用ueditor的实例讲解
Mar 05 Javascript
vue axios数据请求及vue中使用axios的方法
Sep 10 Javascript
vue 自定义组件的写法与用法详解
Mar 04 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
解析MySql与Java的时间类型
2013/06/22 PHP
Yii数据模型中rules类验证器用法分析
2016/07/15 PHP
laravel 判断查询数据库返回值的例子
2019/10/11 PHP
php使用自带dom扩展进行元素匹配的原理解析
2020/05/29 PHP
JavaScript DOM学习第一章 W3C DOM简介
2010/02/19 Javascript
Javascript跨域请求的4种解决方式
2013/03/17 Javascript
js变量、作用域及内存详解
2014/09/23 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
2014/10/17 Javascript
js简单抽奖代码
2015/01/16 Javascript
jQuery前端分页示例分享
2015/02/10 Javascript
node.js下LDAP查询实例分享
2015/09/30 Javascript
node.js-v6新版安装具体步骤(分享)
2017/09/06 Javascript
JavaScript中运算符规则和隐式类型转换示例详解
2017/09/06 Javascript
Vue实现todolist删除功能
2018/06/26 Javascript
vue elementUI tree树形控件获取父节点ID的实例
2018/09/12 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
2019/04/25 Javascript
typescript nodejs 依赖注入实现方法代码详解
2019/07/21 NodeJs
js实现经典贪吃蛇小游戏
2020/03/19 Javascript
实例讲解React 组件
2020/07/07 Javascript
vue form表单post请求结合Servlet实现文件上传功能
2021/01/22 Vue.js
python利用MethodType绑定方法到类示例代码
2017/08/27 Python
Python中单例模式总结
2018/02/20 Python
Python Tornado实现WEB服务器Socket服务器共存并实现交互的方法
2020/05/26 Python
Django用户认证系统如何实现自定义
2020/11/12 Python
Pytest测试框架基本使用方法详解
2020/11/25 Python
酒店总经理工作职责
2013/12/13 职场文书
办公室文员工作职责
2014/01/31 职场文书
小学三年级数学教学反思
2014/01/31 职场文书
CAD制图人员的自荐信
2014/02/07 职场文书
《凡卡》教学反思
2014/04/09 职场文书
反腐倡廉标语
2014/06/24 职场文书
建筑横幅标语
2014/10/09 职场文书
2014年图书馆个人工作总结
2014/12/18 职场文书
工程主管竞聘书
2015/09/15 职场文书
java中用float时,数字后面加f,这样是为什么你知道吗
2021/09/04 Java/Android
python数据分析之单因素分析线性拟合及地理编码
2022/06/25 Python