jQuery实现判断li的个数从而实现其他功能

简介: jQuery实现判断li的个数从而实现其他功能

需求:当ul中的li大于6个的时候显示图片,当li小于6个的时候隐藏图片,先来看看效果:

当有7个li的时候:

当有3个li的时候:

现在吧源码放上来:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            *{
                margin: 0px;
                padding: 0px;
            }
            .hidden_m{
                display: none;
            }
            #div1{
                width: 100%;
                height: 1000px;
                background: greenyellow;
            }
            #li_m_click{
                background: none;
                border:0px;
            }
            ul li{
                float: left;
                width: 150px;
                background: red;
                border: 1px solid black;
                list-style: none;
            }
            #div2{
                width: 25px;
                height: 25px;
                background: yellow;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            <ul>
                <li>关键词1</li>
                <li>关键词2</li>
                <li>关键词3</li>
                <li id="li_m_click" >
                    <div id="div2">
                    </div>
                </li>
            </ul>
        </div>
        <script type="text/javascript">
            $(function(){
                $("#div2").hide();
                    var count = ($("ul li").length)-1;   //获取所有的li的个数,去掉点击的黑色的li
                    if(count>6){
                        $("#div2").show();
                        alert('现在是大于6');
                    }else{
                        $("#div2").hide();
                        alert('现在是小于6');
                    }
            })
        </script>
    </body>
</html>
目录
打赏
0
0
0
0
57
分享
相关文章
jQuery第一天---六大功能的简单应用
jQuery第一天---六大功能的简单应用
73 0
jQuery多功能滑块插件r-slider.js
r-slider.js是一款jQuery多功能滑块插件。使用该插件,可以制作出滑块、开关按钮、进度条、向导步骤等多种效果。
70 5
技术经验解读:从零开始学习jQuery(十)jQueryUI常用功能实战
技术经验解读:从零开始学习jQuery(十)jQueryUI常用功能实战
69 0
jQuery如何实现一个轮播图左右翻页的功能
jQuery如何实现一个轮播图左右翻页的功能
62 0
jQuery最简单的留言功能^-^
jQuery最简单的留言功能^-^
jQuery+Datatables实现表格批量删除功能
jQuery+Datatables实现表格批量删除功能
188 0
|
1月前
jQuery+Slick插件实现游戏人物轮播展示切换源码
jQuery+Slick插件实现游戏人物轮播展示切换源码
44 14
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等