• 技术文章 >web前端 >js教程

    jquery中nth-child(3n)的意思是什么?

    黄舟黄舟2017-06-23 14:19:14原创1428
    :nth-child表示匹配其下的子元素:nth-child(Xn+Y)表示从第Y个开始,递增X则可以有:nth-child(3n+10)表示从第10个开始,10,13,16,19……:nth-child(3n)则Y=0,可省略,表示从0开始,0,3,6,9……

    希望对你有帮助:子元素

    :nth-child(index/even/odd/equation)

    匹配其父元素下的第N个子或奇偶元素

    区别:':eq(index)' 只匹配一个元素,而这个将为每一个父元素匹配子元素。:nth-child从1开始的,而:eq()是从0算起的!

    可以使用::nth-child(even),:nth-child(odd),:nth-child(3n),:nth-child(2),:nth-child(3n+1),:nth-child(3n+2)

    index (Number) : 要匹配元素的序号,从1开始

    示例 在每个ul查找第2个li

    <ul><li>John</li> <li>Karl</li> <li>Brandon</li></ul>
    <ul><li>Glen</li> <li>Tane</li> <li>Ralph</li></ul>

    代码:

    $("ul li:nth-child(2)")


    结果:

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


    nth-child(3n+1)是什么意思?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns=" http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="jquery-1.2.6.js" type="text/javascript" language="javascript"></script>
    <style type="text/css">
    <!--
    -->
    </style>
    <script type="text/javascript" language="javascript" >
    <!--
    $(document).ready(function (){
    $("#nav li:nth-child(3n+2) a").each(function(){
    alert($(this).text());
    });
    });
    -->
    </script>
    </head>
    <body>
    <ul id="nav">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li><a href="#">7</a></li>
    <li><a href="#">8</a></li>
    <li><a href="#">9</a></li>
    <li><a href="#">10</a></li>
    </ul>
    </body>
    </html>

    “:nth-child表示匹配其下的子元素:nth-child(Xn+Y)表示从第Y个开始,递增X则可以有:nth-child(3n+10)表示从第10个开始,10,13,16,19……:nth-child(3n)则Y=0,可省略,表示从0开始,0,3,6,9……”这位回答的有问题的吧,貌似nth-child的参数最小也是1,是从1开始的,而不是从0开始的啊。

    以上就是jquery中nth-child(3n)的意思是什么?的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    上一篇: jquery中选择子元素的选择器即nth-child选择器 下一篇:Jquery :first-child选择器的深入理解
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• 什么是变更检测?聊聊angular的变更机制• 深入了解angular中的@Component装饰器• JavaScript面向对象详细解析之属性描述符• 什么是状态?深入学习angular中的动画• 详解node中如何安装多版本并进行切换
    1/1

    PHP中文网