jquery 选择器 :nth-child(Xn+Y) - KAXU - ITeye博客

`

KAXU

浏览: 267019 次
性别:
来自: 武汉

最近访客更多访客>>

live365.wang

eyesye

shexindong

祺祥治世

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

最新评论

dwl0410：我的这种 aciton请求怎么不行啊。。 <scri ...
jquery加载页面时调用js的方法
djinjie945：谢谢，好使
jquery 遍历 map(callback)
KAXU：对的，官网上的。
jquery 控制 insertBefore(content)
sumaolin：这是手册上的示例吧
jquery 控制 insertBefore(content)
KAXU： black.angel 写道楼主你是转载的吧，怎么弄都弄不好 ...
AppFuse2.0 初始化

jquery 选择器 :nth-child(Xn+Y)

博客分类：

jQuery

阅读更多

:nth-child(Xn+Y)

匹配集合中子集每隔X个元素的第Xn+Y元素集合。返回匹配元素集合

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    $("ul li:nth-child(3n+1)").append("<span> - 3n + 1!</span>");
  });
  </script>
  <style>
  div { float:left; }
  span { color:blue; }
  </style>
</head>
<body>
  <div><ul>
    <li>John</li>
    <li>Karl</li>
    <li>Brandon</li>
	<li>Glen</li>
    <li>Tane</li>
    <li>Ralph</li>
    <li>David</li>
  </ul></div>
  <div><ul>
    <li>Sam</li>
  </ul></div>

</body>
</html>

$("ul li:nth-child(3n+1)").append("<span> - 3n + 1!</span>");
匹配ul中包li的li元素集合，且仅仅为li子集中第3n+1个li元素的li元素集合。以下为匹配元素集合

<li>John</li>
<li>Glen</li>
<li>David</li>
<li>Sam</li>

分享到：

jquery 选择器 :even and :odd | jquery 选择器 :nth-child(even|odd)

2008-12-19 10:52
浏览 1102
评论(0)
查看更多

评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

详解CSS3选择器:nth-child和:nth-of-type之间的差异: 我是第1个p标签我是第2个p标签</p>  然后两个选择器相对应的CSS代码如下： ...p:nth-child(2) { color: red;...对于:nth-child选择器，在简单白话文中，意味着选择一个元素：

jQuery中:nth-child选择器用法实例: 本文实例讲述了jQuery中:nth-child选择器用法。分享给大家供大家参考。具体分析如下：此选择器匹配其父元素下的第N个子或奇偶元素。 :eq(index)选择器只匹配一个元素，而:nth-child选择器将为每一个父元素匹配子...

CSS3 伪类选择器 nth-child()说明: 今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”。语法： :nth-child(an+b) 为什么选择她，因为我认为，这个选择器是最多学问的一个了。很可惜，据我所测，目前能较好地支持她的只有Opera9+和Safari...

CSS3伪类选择器：nth-child(): 面对更多的兼容性问题，今天我们就来“前瞻”一下CSS3的一个伪类选择器“nth-child()”。 CSS3的强大，让人惊叹，人们在惊喜之余，又不得不为其艰难的道路感到可惜：好的标准只有得到行业浏览器的良好支持才算得上...

CSS3中:nth-child和:nth-of-type的区别深入理解: :nth-child可以选择父元素下的字元素，:nth-of-type也可以。但是它们到底有什么区别呢？其实区别很简单：:nth-of-type为什么要叫:nth-of-type？因为它是以"type"来区分的。也就是说：ele:nth-of-type(n)是指父元素...

IE8下CSS3选择器nth-child() 不兼容问题的解决方法: 一、代码 <style> ul{list-style: none} ...div ul li:nth-child(1){background:#f00;} div ul li:nth-child(3){background:#ccc;} </style> <li>11 <li>22 <li>33 二、预览效果如上图

css :nth-child与:nth-of-type之小解: 但两者是存在差异的 :nth-child 选择器，在此例子中意思就是指 1.首先是个p元素 2.其次这个p元素是其父元素的第二个孩子 :nth-of-type 选择器，在此例子中意思就是指 1.定位一个父元素下的第二个p元素 :nth-of-type

CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式: css3的强大，让人惊叹，今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”实现奇偶行显示不同样式，具体的详细示例可以参考下文，希望对大家有所帮助

HTML5&CSS3网页制作：结构化伪类选择器.pptx: CSS3选择器--结构化伪类选择器;结构化伪类选择器;结构化伪类选择器;...:nth-child(n)和:nth-last-child(n)选择器;:nth-of-type(n)和:nth-last-of-type(n)选择器;:empty选择器;:target选择器;总结;;THANKS

jQuery 顺便学习下CSS选择器奇偶匹配nth-child(even): 对此，我把CSS3标准中nth-child()用法大致介绍下： CSS3伪类选择器：nth-child() 简单的归纳下nth-child()的几种用法。第一：nth-child(number) 直接匹配第number个元素。参数number必须为大于0的整数。(EG) li:nth...

使用css属性:nth-child(n)匹配选择第n个子元素: 加入要让第二个 th 占table表格总宽度的50%. 复制代码代码如下: <...:nth-child(n) 选择器匹配属于其父元素(在这里就是tr)的第 N （这里选择第2个）个子元素（这里子元素是th），不论元素的类型。

Jquery下:nth-child(an+b)的使用注意: 后面两个Class为空来应对可能增加的列数来调节列宽 $(“div>p”).parent().not($(“.grid_2”)).filter(“nth-child(“+lenth+”n+1)”)来选择每行的第2列,但是却选中了第三列,百思不得其解利用firbug查询该元素...

详解CSS3中nth-child与nth-of-type的区别: 也就是说：ele:nth-of-type(n)是指父元素下第n个ele元素，而ele:nth-child(n)是指父元素下第n个元素且这个元素为ele，若不是，则选择失败。文字未免听起来比较晦涩，便于理解，这里附上一个小例子： <!...

CSS3伪类选择器；例如：E:root、E:not等等: /* CSS3伪类选择器 E:root 根选择器，它的意思是匹配元素E所在文档的根元素，在HTML文... E:nth-of-type(1) 表示根据指定元素的类型设置第一个元素的样式，其实该选择器类似于nth-child选择器 E:empty 空选择器，

Global site tag (gtag.js) - Google Analytics