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 应用代码 方便的排序功能
Feb 06 Javascript
老鱼 浅谈javascript面向对象编程
Mar 04 Javascript
fancybox modal的完美解决(右上的X)
Oct 30 Javascript
实现动画效果核心方式的js代码
Sep 27 Javascript
控制文字内容的显示与隐藏示例
Jun 11 Javascript
javascript模块化简单解析
Apr 07 Javascript
AngularJS Bootstrap详细介绍及实例代码
Jul 28 Javascript
Javascript this 函数深入详解
Dec 13 Javascript
iframe高度自适应及隐藏滚动条的实例详解
Sep 29 Javascript
angularjs 缓存的使用详解
Mar 19 Javascript
在Create React App中启用Sass和Less的方法示例
Jan 16 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
Jun 11 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控制文件下载速度的方法
2015/03/24 PHP
ThinkPHP模型详解
2015/07/27 PHP
Yii2使用dropdownlist实现地区三级联动功能的方法
2016/07/18 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
JavaScript如何从listbox里同时删除多个项目
2013/10/12 Javascript
标题过长使用javascript按字节截取字符串
2014/04/24 Javascript
jQuery 获取/设置/删除DOM元素的属性以a元素为例
2014/05/23 Javascript
js随机生成网页背景颜色的方法
2015/02/26 Javascript
jquery实现平滑的二级下拉菜单效果
2015/08/26 Javascript
详解JavaScript中数组的reduce方法
2016/12/02 Javascript
jQuery zTree树插件简单使用教程
2017/01/10 Javascript
javascript 显示全局变量与隐式全局变量的区别
2017/02/09 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
2017/05/11 Javascript
还不懂递归?读完这篇文章保证你会懂
2018/07/29 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
2018/08/08 jQuery
vue 使用vue-i18n做全局中英文切换的方法
2018/10/29 Javascript
如何使用JavaScript实现栈与队列
2019/06/24 Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
2020/11/04 Javascript
JS画布动态实现黑客帝国背景效果
2020/11/08 Javascript
关于vue 项目中浏览器跨域的配置问题
2020/11/10 Javascript
Vue router安装及使用方法解析
2020/12/02 Vue.js
[57:47]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python中shutil模块的学习笔记教程
2017/04/04 Python
详解Python中for循环是如何工作的
2017/06/30 Python
matplotlib绘制动画代码示例
2018/01/02 Python
windows下python和pip安装教程
2018/05/25 Python
python3解析库BeautifulSoup4的安装配置与基本用法
2018/06/26 Python
python 实现将字典dict、列表list中的中文正常显示方法
2018/07/06 Python
python+pandas+时间、日期以及时间序列处理方法
2018/07/10 Python
python实现按行分割文件
2019/07/22 Python
Python基于进程池实现多进程过程解析
2020/04/30 Python
软件测试面试题
2015/10/21 面试题
小学语文课后反思精选
2014/04/25 职场文书
党的群众路线教育实践活动个人剖析材料
2014/10/07 职场文书
后天观后感
2015/06/08 职场文书
详解Django的MVT设计模式
2021/04/29 Python