zoukankan      html  css  js  c++  java
  • 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

     效果图如下:

  • 相关阅读:
    c语言中srand和rand函数 生成随机数总结
    枚举类型
    VS2008快捷键使用技巧
    PV实现同步
    PV操作(深入显出)
    数字在排序数组中出现的次数
    两个链表的第一个公共结点
    数组中的逆序对
    第一个只出现一次的字符位置
    丑数
  • 原文地址:https://www.cnblogs.com/xinlei/p/1773473.html
Copyright © 2011-2022 走看看