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

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

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

当有7个li的时候:20180226195528168.png

当有3个li的时候:

20180226195711950.png

现在吧源码放上来:

<!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>
目录
相关文章
|
7月前
|
JavaScript
jQuery实现判断li的个数从而实现其他功能
jQuery实现判断li的个数从而实现其他功能
|
7月前
|
JavaScript 前端开发
jQuery第一天---六大功能的简单应用
jQuery第一天---六大功能的简单应用
64 0
|
JSON JavaScript 前端开发
jQuery动画功能和封装原理
jQuery动画功能和封装原理
85 0
|
27天前
|
JavaScript 前端开发 容器
jQuery多功能滑块插件r-slider.js
r-slider.js是一款jQuery多功能滑块插件。使用该插件,可以制作出滑块、开关按钮、进度条、向导步骤等多种效果。
33 5
|
6月前
|
开发框架 JavaScript 前端开发
技术经验解读:从零开始学习jQuery(十)jQueryUI常用功能实战
技术经验解读:从零开始学习jQuery(十)jQueryUI常用功能实战
48 0
|
6月前
|
JavaScript 前端开发 索引
jQuery如何实现一个轮播图左右翻页的功能
jQuery如何实现一个轮播图左右翻页的功能
51 0
|
7月前
|
JavaScript
jQuery最简单的留言功能^-^
jQuery最简单的留言功能^-^
|
JavaScript 前端开发
jQuery点击图片来回切换功能
jQuery点击图片来回切换功能
105 0
jQuery点击图片来回切换功能
|
JavaScript Java
jQuery+Datatables实现表格批量删除功能
jQuery+Datatables实现表格批量删除功能
173 0
|
JavaScript 定位技术
jQuery实现点击图标div循环放大缩小功能
jQuery实现点击图标div循环放大缩小功能
65 0