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

     效果图如下:

  • 相关阅读:
    junit4
    spring
    hibernate 的注意事项
    Struts2 的 命名规范
    Struts2 的标签
    OGNL
    添加删除 板块 struts2
    Struts2 的各种xml 和struts 配置信息 都是一样的
    struts2
    struts2
  • 原文地址:https://www.cnblogs.com/xinlei/p/1773473.html
Copyright © 2011-2022 走看看