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 相关文章推荐
简单通用的JS滑动门代码
Dec 19 Javascript
快速排序 php与javascript的不同之处
Feb 22 Javascript
Node.js(安装,启动,测试)
Jun 09 Javascript
JavaScript获取某年某月的最后一天附截图
Jun 23 Javascript
易被忽视的js事件问题总结
May 14 Javascript
Node.js Addons翻译(C/C++扩展)
Jun 12 Javascript
AngularJS实践之使用NgModelController进行数据绑定
Oct 08 Javascript
模板视图和AngularJS之间冲突的解决方法
Nov 22 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
May 03 Javascript
ES6扩展运算符的用途实例详解
Aug 20 Javascript
新手简单了解vue
May 29 Javascript
Layui弹出层 加载 做编辑页面的方法
Sep 16 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不使用内置函数实现字符串转整型的方法示例
2017/07/03 PHP
javascript SocialHistory 检查访问者是否访问过某站点
2008/08/02 Javascript
用Greasemonkey 脚本收藏网站会员信息到本地
2009/10/26 Javascript
基于jquery的跨域调用文件
2010/11/19 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
2013/10/25 Javascript
JQuery动画animate的stop方法使用详解
2014/05/09 Javascript
Nodejs学习笔记之NET模块
2015/01/13 NodeJs
javascript判断变量是否有值的方法
2015/04/20 Javascript
Vue.js自定义事件的表单输入组件方法
2018/03/08 Javascript
vue项目关闭eslint校验
2018/03/21 Javascript
详解vue 项目白屏解决方案
2018/10/31 Javascript
JSX在render函数中的应用详解
2019/09/04 Javascript
vue和iview实现Scroll 数据无限滚动功能
2019/10/31 Javascript
vue实现户籍管理系统
2020/05/29 Javascript
用vite搭建vue3应用的实现方法
2021/02/22 Vue.js
python读取文本中的坐标方法
2018/10/14 Python
python实现一个简单的udp通信的示例代码
2019/02/01 Python
关于pandas的离散化,面元划分详解
2019/11/22 Python
python装饰器使用实例详解
2019/12/14 Python
3种python调用其他脚本的方法
2020/01/06 Python
Python单链表原理与实现方法详解
2020/02/22 Python
浅谈keras保存模型中的save()和save_weights()区别
2020/05/21 Python
keras.utils.to_categorical和one hot格式解析
2020/07/02 Python
Django+Uwsgi+Nginx如何实现生产环境部署
2020/07/31 Python
Python爬虫爬取微信朋友圈
2020/08/06 Python
Python系统公网私网流量监控实现流程
2020/11/23 Python
python 监控服务器是否有人远程登录(详细思路+代码)
2020/12/18 Python
美国学校用品、教室和教学商店:Discount School Supply
2018/04/04 全球购物
大学生农村教师实习自我鉴定
2013/09/21 职场文书
应聘面试自我评价
2014/01/24 职场文书
公务员政审单位鉴定材料
2014/05/16 职场文书
效能监察建议书
2014/05/19 职场文书
我是一名护士演讲稿
2014/08/28 职场文书
2015年入党积极分子评语
2015/03/26 职场文书
送达通知书
2015/04/25 职场文书
php 文件上传至OSS及删除远程阿里云OSS文件
2021/07/04 PHP