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封装tab自动切换效果的具体实现
Jul 13 Javascript
jquery基础知识第一讲之认识jquery
Mar 17 Javascript
Angular2内置指令NgFor和NgIf详解
Aug 03 Javascript
Angularjs中controller的三种写法分享
Sep 21 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
Nov 10 Javascript
浅谈JavaScript的闭包函数
Dec 08 Javascript
微信小程序 图片宽度自适应的实现
Apr 06 Javascript
vue.js利用defineProperty实现数据的双向绑定
Apr 28 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
Jul 06 Javascript
讲解vue-router之命名路由和命名视图
May 28 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
Jun 01 Javascript
解决Antd Table组件表头不对齐的问题
Oct 27 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实现图片文件与下载文件防盗链的方法
2014/11/03 PHP
常见php数据文件缓存类汇总
2014/12/05 PHP
最新28个很棒的jQuery 教程
2011/05/28 Javascript
javascript获取所有同类checkbox选项(实例代码)
2013/11/07 Javascript
javascript 终止函数执行操作
2014/02/14 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
2014/05/11 Javascript
js转html实体的方法
2016/09/27 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
2018/03/13 Javascript
vue-cli2.9.3 详细教程
2018/04/23 Javascript
解决vue跨域axios异步通信问题
2019/04/17 Javascript
微信小程序页面滚动到指定位置代码实例
2019/09/07 Javascript
微信小程序实现拖拽功能
2019/09/26 Javascript
Vue基础配置讲解
2019/11/29 Javascript
js实现3D旋转相册
2020/08/02 Javascript
vue+iview实现分页及查询功能
2020/11/17 Vue.js
Python中函数的参数传递与可变长参数介绍
2015/06/30 Python
python中文分词,使用结巴分词对python进行分词(实例讲解)
2017/11/14 Python
django2用iframe标签完成网页内嵌播放b站视频功能
2018/06/20 Python
Python实用技巧之列表、字典、集合中根据条件筛选数据详解
2018/07/11 Python
用python画一只可爱的皮卡丘实例
2019/11/21 Python
python3连接mysql获取ansible动态inventory脚本
2020/01/19 Python
Python中的sys.stdout.write实现打印刷新功能
2020/02/21 Python
Python flask框架端口失效解决方案
2020/06/04 Python
用python写爬虫简单吗
2020/07/28 Python
使用CSS实现阅读进度条
2017/02/27 HTML / CSS
印刷工程专业应届生求职信
2013/09/29 职场文书
自我鉴定怎么写
2014/01/12 职场文书
个人简历中自我评价
2014/02/11 职场文书
药品促销活动方案
2014/02/14 职场文书
贯彻学习两会心得体会范文
2014/03/17 职场文书
小学班主任寄语大全
2014/04/04 职场文书
学校周年庆活动方案
2014/08/22 职场文书
收款授权委托书
2014/10/02 职场文书
党的群众路线教育实践活动总结
2014/10/30 职场文书
个人汇报材料范文
2014/12/30 职场文书
spring boot实现文件上传
2022/08/14 Java/Android