jquery :nth-child()选择器的简单应用
今天项目中遇到过一个这样的问题，就是希望读出来的文章列表能够每隔五个加一个分割条，而不是每个都加。
通过网上咨询使用这个选择器便很容易的解决。特此记录一下。
下面是主要的代码
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>
具体的用法这里就不写了，大家可以参考
http://www.cnblogs.com/Elgin/archive/2010/05/24/1742563.html
http://www.2ndvisual.com/xhtml/css/20616.html
效果图如下：
转载于:https://www.cnblogs.com/xinlei/archive/2010/07/08/1773473.html
jquery :nth-child()选择器的简单应用相关推荐
- nth:child()选择器
nth:child()属于CSS3中的选择器,针对于有多个相同标签时可以对每个标签的样式进行单独设置,以微信小程序开发中所写的代码为例: 这是wxml中的代码(类似于html): 这是wxss中的代码 ...
- 转：初探 jQuery 的 Sizzle 选择器
这是一篇关于介绍jQuery Sizzle选择器的文章,由我和obility共同完成.在文中,我们试图用自己的语言配以适量的代码向读者展现出Sizzle在处理选择符时的流程原理,以及末了以少许文字给你 ...
- jQuery 的 Sizzle 选择器
这是一篇关于介绍jQuery Sizzle选择器的文章,由我和obility共同完成.在文中,我们试图用自己的语言配以适量的代码向读者展现出Sizzle在处理选择符时的流程原理,以及末了以少许文字给你 ...
- jQuery简介及选择器
一.jQuery简介 1.JS的onload事件只能实现一次,而且实现的是最后一次 2.jQ可以实现多次,按代码顺序实现 3.基本语法 通过$ 符定义jQuery, $( 选择器 ) . 方法 ( ) ...
- jQuery系列 第四章 jQuery框架的选择器
第四章 jQuery框架的选择器 4.1 jQuery选择器说明 jQuery 最核心的组成部分就是选择器引擎.它完全继承了 CSS 的风格,可以对 DOM 元 素的标签名.属性名.状态等进行快速准确 ...
- jQuery子元素选择器
7.jQuery子元素选择器 7.1:first-child 匹配所给选择器( :之前的选择器)的第一个子元素类似的:first匹配第一个元素,但是:first-child选择器可以匹配多个:即为每个 ...
- 初探 jQuery 的 Sizzle 选择器
这是一篇关于介绍jQuery Sizzle选择器的文章,由我和obility共同完成.在文中,我们试图用自己的语言配以适量的代码向读者展现出Sizzle在处理选择符时的流程原理,以及末了以少许文字给你 ...
- 重磅推荐12款jQuery编写的选择器
我最近开始编写自己的jQuery选择器,我越来越开始意识到这是一种不错而简洁的完成某些特定任务的方式,而以往我使用的是迭代器. 这些选择器中如果不是你一直在寻找的,你也许根本将不会碰到.所以我决定写下 ...
- jQuery的筛选选择器
基本筛选选择器 很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素,为此jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素.筛选选择器很多都不是CSS的规范,而是jQu ...
- js层级选择框样式_【JavaWeb】85：jQuery的各种选择器
今天是刘小爱自学Java的第85天. 感谢你的观看,谢谢你. 话不多说,开始今天的学习: 选择器的作用是什么? 可以快速准确地定位我们所需要的标签. 刚学CSS的时候,觉得CSS选择器也太多了吧,直到 ...
最新文章
- 学而思python_感恩遇到学而思网校，让我找到做老师的使命感和成就感
- A-Grade Browser By Yahoo
- Android --- 屏幕方向screenOrientation属性详解
- “make -n”和 “+command”的解释
- MS SQL SERVER数据库简单回顾
- 两个运放制作加法器_同相加法器电路图_反相加法器电路图_运放加法器电路图解析...
- c语言 数据结构 多为整数带括号四则运算,用C语言实现 多位整数的四则运算，用栈，例如56*（12+20）-102/2...
- 无心剑2022年七绝83首
- vue无法监听对象的属性的增加和删除
- c里面的fflush函数
- 实验一 结构化分析(软件工程）
- android 斜边_斜边计算器app下载|斜边计算器安卓版下载_v1.0.1_9ht安卓下载
- JetBrains Rider 软件使用快速入门
- 当自己觉得特别迷茫的时候，是怎么走出这个困境的
- 能量英语(三) 之 “情感把控 II ”
- c++动态规划法求解斐波那契数列
- (11)RabbitMQ的mandatory、immediate和ReturnListener
- [Unity实践笔记] 俯视视角人物360°移动脚本
- mysql员工请假流程表字段_“员工请假”流程及在线表单开发示例
- postgresql之List
热门文章
- 【IEEE独立出版/EI稳定检索】信息科学、计算机技术与交通运输征稿倒计时
- Fastformer：史上最强最快Transformer！清华、MSRA出品！
- numpy.random随机数模块常用函数总结
- 山东2021高考成绩查询时间二本,山东二本录取结果什么时候出来,2021年高考山东二本录取结果查询时间...
- 通过数组下标获取值都有哪些方法_通过面试题，让我们来了解Collection
- vmware linux版本_vmware无法在kali下打开问题
- RedisTemplate设置过期时间
- 2019上半年系统集成项目管理工程师下午案例分析真题与答案解析
- redis最基础的入门教程
- pythonweb框架