• jquery :nthchild()选择器的简单应用


    今天项目中遇到过一个这样的问题,就是希望读出来的文章列表能够每隔五个加一个分割条,而不是每个都加。

    通过网上咨询使用这个选择器便很容易的解决。特此记录一下。

    下面是主要的代码

    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

     效果图如下:

  • 相关阅读:
    基于Karma和Jasmine的angular自动化单元测试
    【转】使用SVG中的Symbol元素制作Icon
    【转】整理分析:Before 和 :After及其实例
    【转载】CSS中强大的EM
    【转】提升说服力!UI设计的心理学
    解决IE8不支持数组的indexOf方法
    KISSY Slide 组件应用遇到的一个放大缩小问题
    jQuery.extend 函数详解(转载)
    事件冒泡分析及return false、preventDefault、stopPropagation的区别
    jquery学习(一)-选择器
  • 原文地址:https://www.cnblogs.com/xinlei/p/1773473.html
Copyright © 2020-2023  润新知