联系我们

为客户提供超预期的高品质网站设计!

jquery 隐藏没有内容的元素(循环做法)

2017-4-23 0:00:00

例子一:

======================================================

<li><span class="triangle">1</span><span class=yaoDian>文字文字文字1</span></li>
<li><span class="triangle">2</span><span class=yaoDian>文字文字文字2</span></li>
<li><span class="triangle">3</span><span class=yaoDian>文字文字文字3</span></li>
<li><span class="triangle">4</span><span class=yaoDian></span></li>


用jquery把class=yaoDian中没有内容的li隐藏,即上述的最后一个li隐藏。

 <script type="text/javascript">
        $(document).ready(function () {

          
            $(".yaoDian").each(function () {
                if ($(this).text() == "") {
                    $(this).parent().hide()
                }
            });


        })
</script>


例子二:

======================================================

 <li><a class="" href="default.aspx?ID1=196&amp;linkMdb=menuDetail">首 页</a>
   <div class="lev_menu">
    <ul>
    </ul>
   </div> </li>
  <li><a class="hov" href="about.aspx?ID1=197&amp;linkMdb=menuDetail">公司信息</a>
   <div class="lev_menu">
    <ul>
     <li><a href="about.aspx?ID1=197&amp;ID2=2&amp;linkMdb=menuDetail">公司介绍</a></li>
     <li><a href="about.aspx?ID1=197&amp;ID2=3&amp;linkMdb=menuDetail">经营理念</a></li>
     <li><a href="about.aspx?ID1=197&amp;ID2=4&amp;linkMdb=menuDetail">战略定位</a></li>
    </ul>
   </div> </li>
  <li><a class="" href="about.aspx?ID1=198&amp;linkMdb=products">产品展示</a>
   <div class="lev_menu">
    <ul>
     <li><a href="products.aspx?ID1=197&amp;ID2=73&amp;linkMdb=menuDetail">白色缝料</a></li>
     <li><a href="products.aspx?ID1=197&amp;ID2=74&amp;linkMdb=menuDetail">金色缝料</a></li>
     <li><a href="products.aspx?ID1=197&amp;ID2=94&amp;linkMdb=menuDetail">施工现场</a></li>
    </ul>
   </div> </li>


下来菜单中对于“首页”中没有的,会显示一个空白的方框,不美观,通过jquery删除:

<script>
            $(function () {

                $(".lev_menu>ul").each(function ()
                {
                    if (!$(this).has("li").length > 0) {
                        $(this).parent().remove();
                    }
                   
                });

              
            })
    </script>

======================================================

扩展导读:

判断yaodian中的内容的文字是否小于3个文字,如果少于3个文字,就隐藏

 <script type="text/javascript">
        $(document).ready(function () {

          
            $(".yaoDian").each(function () {
                if ($(this).text().length<3) {
                    $(this).parent().hide()
                }
            });


        })
    </script>

 

上一条新闻: Repeater嵌套绑定Repeater以及内层调用外层数据
下一条新闻:拦截sql盲注,post提交和get提交,检测cookie等内容

 

4000-550-980 54057491 info@maolian.net