`
KAXU
  • 浏览: 267017 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

jquery 选择器 :nth-child(n)

jQueryHTML 
阅读更多

:nth-child(n)

匹配集合中子集的第N个元素的元素集合。返回匹配元素集合。

<!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(2)").append("<span> - 2nd!</span>");
  });
  </script>
  <style>
  div { float:left; }
  span { color:blue; }
  </style>
</head>
<body>
  <div><ul>
    <li>John</li>
    <li>Karl</li>
    <li>Brandon</li>
  </ul></div>
  <div><ul>
    <li>Sam</li>
  </ul></div>
  <div><ul>
    <li>Glen</li>
    <li>Tane</li>
    <li>Ralph</li>
    <li>David</li>
  </ul></div>
</body>
</html>

 

$("ul li:nth-child(2)").append("<span> - 2nd!</span>");
将匹配ul元素里包含li的li元素集合，且仅仅为子集li里第2个元素的li元素集合。以下为匹配集合

<li>Karl</li>
<li>Tane</li>

分享到：
| jquery 选择器 :only-child
评论
发表评论

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

相关推荐

    jQuery中:nth-child选择器用法实例

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

    jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)

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

    jQuery :nth-child前有无空格的区别分析

    :nth-child(index)子元素过滤选择器的描述是：选取每个父元素下的弟index个子元素，index从1开始。

    CSS3伪类选择器；例如：E:root、E:not等等

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

    jquery nth-child()选择器的简单应用

    下面是主要的代码 js脚本： 代码如下: [removed] $(document).ready( function () { //每隔五行给li加一个样式 $(‘.article_li li:nth-child(5n)’).addClass(‘liborder’); $(‘.article_li li:last’).addClass...

    jquery子元素过滤选择器使用示例

    代码如下: :nth-child(‘索引值’)//获取指定元素下的某个子元素的位置，索引从1开始； //偶数行 //$(‘li:nth-child(even)’).addClass(‘class1’); //奇数行 //$(‘li:nth-child(odd)’).addClass(‘class1’); /...

    css选择器apolo

    * 参考： jquery css选择器 * 目前实现 * #id 根据给定的ID匹配一个元素 * tagName 匹配给定的元素名的所有元素 * .class 匹配class=class的所有元素 //非IE下，可以直接find * selector1,selector2 将每一个...

    jQuery子选择器与可见性选择器实例分析

    本文实例讲述了jQuery子选择器与可见性选择器。分享给大家供大家参考，具体如下： 子元素选择器与可见性选择器 子元素选择器是允许利用子元素的位置进行获取的选择器 子内容选择器3种用法 E:first-child 选择所有...

    jQuery Selectors(选择器)的使用(七、子元素篇)

    本篇讲解：:nth-child(index/even/odd/equation),:first-child,:last-child,:only-child的用法。 您对本系列文章有任何建议或意见请发送到邮箱：sjzlgt@qq.com 由于是第一次写技术性系列文章，难免会出错或代码BUG...

    详细介绍CSS中的伪选择器

     我们知道在jquery中有一种选择器叫做“子类选择器”，对应的有:nth-child，:first-child，:last-child，:only-child，这回在CSS中同样 可以办到，可以说一定程度上缓解了jquery的压力，下面简单举个例子。&lt;head...

    jQuery 关于伪类选择符的使用说明

    jQuery选择器的强大不仅在于选择器支持基本的css选择符，还支持很多CSS的伪类选择符，甚至可以自定义选择符，下面让我们来看看一些伪类选择符  :nth-child的用法 nth-child是一个css3伪类选择符,在jQuery中被实现...

    jQuery基础教程笔记适合js新手第1/2页

    1, ：eq()和nth-child() 看下面代码： [removed] $(function(){ $(“#selected-plays... //而css选择器:nth-child（）是从 1 开始的， 所以要选择第二个元素， 得使用 :nth-child(2) ，而不是:nth-child(1)。

    简单讲解jQuery中的子元素过滤选择器

    子元素过滤器的过滤规则是通过父元素和子元素的关系来获取相应的元素。 $('li:first-child').css('background', '#ccc');...$('li:nth-child(odd)').css('background', '#ccc'); //每个父元素奇数li 元素 $('li

    Jquery 表单取值赋值的一些基本操作

    E:root:类型为E,并且是文档的根元素 E:nth-child(n):是其父元素的第n个类型为E的子元素 ,基数从1开始 E:first-child:是其父元素的第1个类型为E的子元素 E:last-child:是其父元素的最后一个类型为E的子元素 E:only

    JQuery新版中文手册

    选择器 基本 #id element .class * selector1,selector2,selectorN 层级 ancestor descendant parent &gt; child prev + next prev ~ siblings 基本 :first :last :not(selector) :even :odd :eq...

    那些年，我还在学习jquery 学习笔记

    原来Jquery就是一个javascript写的一个库，它给我们提供了很多常用的方法，使用这些方法可以兼容多种浏览器，使用它可以达到很好的动画效果，下面就来看看那些年的学习笔记吧一、$符号 1、选择器 可以选择html标签，...

    jQuery子属性过滤选择器用法分析

    主要介绍了jQuery子属性过滤选择器用法,实例分析了:first-child、:last-child、:nth-child、:only-chilid等子属性过滤选择器使用技巧,需要的朋友可以参考下

Magicbox
Global site tag (gtag.js) - Google Analytics