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

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

jQueryHTML 
阅读更多

:nth-child(even|odd)

匹配集合中子集里奇数元素或是偶数元素的元素集合。返回匹配元素集合

<!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(even)").append("<span> - even!</span>");
	$("ul li:nth-child(odd)").append("<span> - odd!</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(even)").append("<span> - even!</span>");
匹配ul里包含li的li元素集合，且仅仅是li子集中的偶数li元素集合。以下为匹配元素

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

分享到：
| jquery 选择器 :nth-child(n)
评论
发表评论

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

相关推荐

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

    //偶数行 //$(‘li:nth-child(even)’).addClass(‘class1’); //奇数行 //$(‘li:nth-child(odd)’).addClass(‘class1’); //第一行 //$(‘li:nth-child(1)’).addClass(‘class1’); //$(‘li:first-child’)....

    css选择器apolo

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

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

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

    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标签，...

    jquery1.11.0手册

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

    jQuery完全实例.rar

    这个函数接收一个包含 CSS 选择器的字符串，然后用这个字符串去匹配一组元素。 jQuery 的核心功能都是通过这个函数实现的。 jQuery中的一切都构建于这个函数之上，或者说都是在以某种方式使用这个函数。这个函数最...

    Jquery 1.3 简体中文手册

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

    JQuery 1.3 中文参考手册

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

    jQuery1.4 API

    child prev + next prev ~ siblings 基本 :first :last :not :even :odd :eq :gt :lt :header :animated 内容 :contains :empty :has :parent 可见性 :hidden :visible 属性 [attribute] [attribute=value] ...

    jQuery 1.4.1 中文参考

    3. 选择器 37 3.1 基本 37 3.1.1 #id 37 3.1.2 element 38 3.1.3 .class 38 3.1.4 * 39 3.1.5 selector1,selector2,selectorN 39 3.2 层级 40 3.2.1 ancestor descendant 40 3.2.2 41 3.2.3 prev + next 41 3.2.4 ...

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