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 this指针
Jul 30 Javascript
使用隐藏的new来创建对象
Mar 29 Javascript
根据选择不同的下拉值出现相对应的文本输入框
Aug 01 Javascript
JavaScript中的small()方法使用详解
Jun 08 Javascript
Bootstrap每天必学之进度条
Nov 30 Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
Jun 08 Javascript
Google 地图叠加层实例讲解
Aug 06 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
Sep 14 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
解决vue attr取不到属性值的问题
Sep 18 Javascript
构建一个JavaScript插件系统
Oct 20 Javascript
微信小程序接入vant Weapp组件的详细步骤
Oct 28 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自定义函数格式化json数据示例
2016/09/14 PHP
PHP 多任务秒级定时器的实现方法
2018/05/13 PHP
解决 firefox 不支持 document.all的方法
2007/03/12 Javascript
文件编码导致jquery失效的解决方法
2013/06/26 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
2014/02/17 Javascript
jQuery实现自动滚动到页面顶端的方法
2015/05/22 Javascript
学习JavaScript设计模式(接口)
2015/11/26 Javascript
js实现的万能flv网页播放器代码
2016/04/30 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
2016/07/08 Javascript
模板视图和AngularJS之间冲突的解决方法
2016/11/22 Javascript
详解AngularJS脏检查机制及$timeout的妙用
2017/06/19 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
2017/07/11 Javascript
jQuery实现的滑块滑动导航效果示例
2018/06/04 jQuery
vue  自定义组件实现通讯录功能
2018/09/30 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
2018/11/16 Javascript
jQuery创建折叠式菜单
2019/06/15 jQuery
使用Python的Django框架实现事务交易管理的教程
2015/04/20 Python
Python计算三角函数之asin()方法的使用
2015/05/15 Python
Python实现合并字典的方法
2015/07/07 Python
Python中random模块生成随机数详解
2016/03/10 Python
Python实现带百分比的进度条
2016/06/28 Python
Python编程之微信推送模板消息功能示例
2017/08/21 Python
对numpy中shape的深入理解
2018/06/15 Python
解决python replace函数替换无效问题
2020/01/18 Python
浅谈python输出列表元素的所有排列形式
2020/02/26 Python
Python AutoCAD 系统设置的实现方法
2020/04/01 Python
CSS3中Transition动画属性用法详解
2016/07/04 HTML / CSS
澳大利亚领先的皮肤诊所:Skin Matrix(抗衰老、痤疮专家、药妆护肤)
2018/05/20 全球购物
ECOSUSI官网:女式皮革背包
2019/09/27 全球购物
英国网上自行车商店:Tredz Bikes
2019/10/29 全球购物
构建高效课堂实施方案
2014/03/13 职场文书
离婚协议书范文2014
2014/10/16 职场文书
保洁员岗位职责
2015/02/04 职场文书
讲座通知范文
2015/04/23 职场文书
干部考核工作总结
2015/08/12 职场文书
2016教师廉洁教育心得体会
2016/01/13 职场文书