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 支持链式调用的异步调用框架Async.Operation
Aug 04 Javascript
Extjs4 类的定义和扩展实例
Jun 28 Javascript
jQuery中校验时间格式的正则表达式小结
Sep 22 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
Feb 19 Javascript
JavaScript获取页面中超链接数量的方法
Nov 09 Javascript
javascript设计模式--策略模式之输入验证
Nov 27 Javascript
jquery遍历table的tr获取td的值实现方法
May 19 Javascript
jQuery双向列表选择器DIV模拟版
Nov 01 Javascript
详解Javascript数据类型的转换规则
Dec 12 Javascript
微信小程序 弹框和模态框实现代码
Mar 10 Javascript
详解Vue-cli代理解决跨域问题
Sep 27 Javascript
记一次webpack3升级webpack4的踩坑经历
Jun 12 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
Session的工作方式
2006/10/09 PHP
将文件夹压缩成zip文件的php代码
2009/12/14 PHP
mysql From_unixtime及UNIX_TIMESTAMP及DATE_FORMAT日期函数
2010/03/21 PHP
WordPress中登陆后关闭登陆页面及设置用户不可见栏目
2015/12/31 PHP
使用PHP连接多种数据库的实现代码(mysql,access,sqlserver,Oracle)
2016/12/21 PHP
Laravel框架中自定义模板指令总结
2017/12/17 PHP
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
2010/04/02 Javascript
基于jquery的滑动样例代码
2010/11/20 Javascript
IE8下Jquery获取select选中的值post到后台报错问题
2014/07/02 Javascript
jquery仅用6行代码实现滑动门效果
2015/09/07 Javascript
图文详解JavaScript的原型对象及原型链
2016/08/02 Javascript
js仿小米官网图片轮播特效
2016/09/29 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
2016/10/20 Javascript
Angular学习笔记之angular的$filter服务浅析
2016/11/12 Javascript
JQuery.validationEngine表单验证插件(推荐)
2016/12/10 Javascript
js阻止移动端页面滚动的两种方法
2017/01/25 Javascript
微信分享调用jssdk实例
2017/06/08 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
2018/07/20 Javascript
服务端预渲染之Nuxt(使用篇)
2019/04/08 Javascript
Windows中安装使用Virtualenv来创建独立Python环境
2016/05/31 Python
Python中文分词工具之结巴分词用法实例总结【经典案例】
2017/04/15 Python
Python实现简单生成验证码功能【基于random模块】
2018/02/10 Python
wxPython实现分隔窗口
2019/11/19 Python
wxpython多线程防假死与线程间传递消息实例详解
2019/12/13 Python
Python3爬虫带上cookie的实例代码
2020/07/28 Python
python上下文管理器异常问题解决方法
2021/02/07 Python
纽约复古灵感的现代珠宝品牌:Lulu Frost
2018/03/03 全球购物
Dillard’s百货官网:Dillards.com
2018/05/26 全球购物
eVitamins日本:在线购买折扣维生素、补品和草药
2019/04/04 全球购物
欧洲领先的技术商店:eibmarkt.com
2019/05/10 全球购物
德国Discount-Apotheke中文官网:DC德式康线上药房
2020/02/18 全球购物
国际政治学专业推荐信
2014/09/26 职场文书
大学生见习总结报告
2015/06/24 职场文书
python之np.argmax()及对axis=0或者1的理解
2021/06/02 Python
Python何绘制带有背景色块的折线图
2022/04/23 Python
win10滚动条自动往上跑怎么办?win10滚动条自动往上跑的解决方法
2022/08/05 数码科技