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

     效果图如下:

  • 相关阅读:
    定力
    cordova build android 环境的坑
    我和数据差个“axios" -- axios的原理解析
    Promise的原理探究及手写Promise
    vue长列表优化
    koa-中间件使用
    vue组件库自动生成文档-vue-styleguidist(二)
    vue组件库自动生成文档-vue-styleguidist(一)
    vue组件库自动生成文档-生成方式对比(1)
    我的目录
  • 原文地址:https://www.cnblogs.com/xinlei/p/1773473.html
Copyright © 2011-2022 走看看