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 相关文章推荐
Array的push与unshift方法性能比较分析
Mar 05 Javascript
JavaScript中setAttribute用法介绍
Jul 20 Javascript
JQuery以JSON方式提交数据到服务端示例代码
May 05 Javascript
浅谈jQuery的offset()方法及示例分享
Jul 17 Javascript
javascript实现框架高度随内容改变的方法
Jul 23 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
Sep 24 Javascript
JS+Canvas 实现下雨下雪效果
May 18 Javascript
JS实现针对给定时间的倒计时功能示例
Apr 11 Javascript
判断颜色是否合法的正则表达式(详解)
May 03 Javascript
Vue.js tab实现选项卡切换
May 16 Javascript
vue-cli随机生成port源码的方法
Sep 02 Javascript
Element el-button 按钮组件的使用详解
Feb 01 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架构及原理知识点详解
2019/12/22 PHP
基于jquery实现后台左侧菜单点击上下滑动显示
2013/04/11 Javascript
JavaScript实现动态创建CSS样式规则方案
2014/09/06 Javascript
javascript中parseInt()函数的定义和用法分析
2014/12/20 Javascript
JavaScript正则表达式之multiline属性的应用
2015/06/16 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
2016/10/05 Javascript
微信小程序教程系列之视图层的条件渲染(10)
2017/04/19 Javascript
iscroll.js滚动加载实例详解
2017/07/18 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
2017/07/22 jQuery
React native ListView 增加顶部下拉刷新和底下点击刷新示例
2018/04/27 Javascript
vue使用监听实现全选反选功能
2018/07/06 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
2019/05/16 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
2019/08/08 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
2019/10/10 jQuery
python自动化工具日志查询分析脚本代码实现
2013/11/26 Python
python实现查找excel里某一列重复数据并且剔除后打印的方法
2015/05/26 Python
Python读取文件内容的三种常用方式及效率比较
2017/10/07 Python
Python使用pickle模块存储数据报错解决示例代码
2018/01/26 Python
Python机器学习库scikit-learn安装与基本使用教程
2018/06/25 Python
Python实现矩阵相乘的三种方法小结
2018/07/26 Python
Python数据预处理之数据规范化(归一化)示例
2019/01/08 Python
对Python3之进程池与回调函数的实例详解
2019/01/22 Python
python实现诗歌游戏(类继承)
2019/02/26 Python
Django接收post前端返回的json格式数据代码实现
2019/07/31 Python
Django Admin中增加导出Excel功能过程解析
2019/09/04 Python
python计算n的阶乘的方法代码
2019/10/25 Python
Python变量、数据类型、数据类型转换相关函数用法实例详解
2020/01/09 Python
详解pycharm连接不上mysql数据库的解决办法
2020/01/10 Python
详解python如何引用包package
2020/06/07 Python
python map比for循环快在哪
2020/09/21 Python
写给女生的道歉信
2014/01/14 职场文书
个人委托书范本
2014/04/02 职场文书
2014年学习委员工作总结
2014/11/14 职场文书
HTML5 语义化标签(移动端必备)
2021/08/23 HTML / CSS
HTML页面中使两个div并排显示的实现
2022/05/15 HTML / CSS
Redis基本数据类型哈希Hash常用操作命令
2022/06/01 Redis