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 相关文章推荐
向fckeditor编辑器插入指定代码的方法
May 25 Javascript
JavaScript 对话框和状态栏使用说明
Oct 25 Javascript
jQuery学习笔记之jQuery动画效果
Sep 09 Javascript
jquery实现按Enter键触发事件示例
Sep 10 Javascript
js图片处理示例代码
May 12 Javascript
jQuery后代选择器用法实例
Dec 23 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
Dec 28 Javascript
微信小程序 引入es6 promise
Apr 12 Javascript
js图片上传的封装代码
Aug 01 Javascript
[js高手之路]寄生组合式继承的优势详解
Aug 28 Javascript
js中数组常用方法总结(推荐)
Apr 09 Javascript
taro 实现购物车逻辑的实例代码
Jun 05 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日历[测试通过]
2008/03/27 PHP
PhpDocumentor 2安装以及生成API文档的方法
2014/05/21 PHP
ThinkPHP3.1.3版本新特性概述
2014/06/19 PHP
浅谈本地WAMP环境的搭建
2015/05/13 PHP
使用PHP实现下载CSS文件中的图片
2015/12/06 PHP
WordPress中邮件的一些修改和自定义技巧
2015/12/15 PHP
iOS+PHP注册登录系统 PHP部分(上)
2016/12/26 PHP
深入了解javascript中的prototype与继承
2013/04/14 Javascript
jquery给图片添加鼠标经过时的边框效果
2013/11/12 Javascript
JQuery中$.ajax()方法参数详解及应用
2013/12/12 Javascript
Ajax提交与传统表单提交的区别说明
2014/02/07 Javascript
JavaScript中使用concat()方法拼接字符串的教程
2015/06/06 Javascript
高效利用Angular中内置服务$http、$location等
2016/03/22 Javascript
Angular.js中$apply()和$digest()的深入理解
2016/10/13 Javascript
Javascript使用function创建类的两种方法(推荐)
2016/11/19 Javascript
详解nodejs微信公众号开发——6.自定义菜单
2017/04/13 NodeJs
解决Angular.js中使用Swiper插件不能滑动的问题
2018/02/26 Javascript
angularjs http与后台交互的实现示例
2018/12/21 Javascript
微信小程序后端(java)开发流程的详细步骤
2019/11/13 Javascript
jquery实现进度条状态展示
2020/03/26 jQuery
分享8个JavaScript库可更好地处理本地存储
2020/10/12 Javascript
windows上安装Anaconda和python的教程详解
2017/03/28 Python
Pandas实现数据类型转换的一些小技巧汇总
2018/05/07 Python
python中csv文件的若干读写方法小结
2018/07/04 Python
Python API 自动化实战详解(纯代码)
2019/06/11 Python
关于django 1.10 CSRF验证失败的解决方法
2019/08/31 Python
python遍历文件目录、批量处理同类文件
2019/08/31 Python
Python进阶之使用selenium爬取淘宝商品信息功能示例
2019/09/16 Python
Python爬虫爬取微信朋友圈
2020/08/06 Python
Django静态文件加载失败解决方案
2020/08/26 Python
改变 Python 中线程执行顺序的方法
2020/09/24 Python
Python数据可视化常用4大绘图库原理详解
2020/10/23 Python
python使用selenium爬虫知乎的方法示例
2020/10/28 Python
瑞士男士时尚网上商店:Babista
2020/05/14 全球购物
地质灾害防治方案
2014/05/14 职场文书
工程项目合作意向书
2015/05/08 职场文书