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>
目录
相关文章
|
2月前
|
JavaScript
jQuery实现判断li的个数从而实现其他功能
jQuery实现判断li的个数从而实现其他功能
|
2月前
|
JavaScript 前端开发
jQuery第一天---六大功能的简单应用
jQuery第一天---六大功能的简单应用
42 0
|
10月前
|
JSON JavaScript 前端开发
jQuery动画功能和封装原理
jQuery动画功能和封装原理
63 0
|
18天前
|
开发框架 JavaScript 前端开发
技术经验解读:从零开始学习jQuery(十)jQueryUI常用功能实战
技术经验解读:从零开始学习jQuery(十)jQueryUI常用功能实战
16 0
|
27天前
|
JavaScript 前端开发 索引
jQuery如何实现一个轮播图左右翻页的功能
jQuery如何实现一个轮播图左右翻页的功能
15 0
|
2月前
|
JavaScript
jQuery最简单的留言功能^-^
jQuery最简单的留言功能^-^
|
8月前
|
JavaScript 前端开发
jQuery点击图片来回切换功能
jQuery点击图片来回切换功能
73 0
jQuery点击图片来回切换功能
|
8月前
|
JavaScript Java
jQuery+Datatables实现表格批量删除功能
jQuery+Datatables实现表格批量删除功能
95 0
|
8月前
|
JavaScript 定位技术
jQuery实现点击图标div循环放大缩小功能
jQuery实现点击图标div循环放大缩小功能
39 0
jQuery实现下拉列表选择条目左右选择功能
jQuery实现下拉列表选择条目左右选择功能