js ul li 隐藏多余li

JavaScript019

js ul li 隐藏多余li,第1张

<ul>

<li>111</li>

<li>222</li>

<li>333</li>

<li>444</li>

</ul>

<script>

window.onload=function(){

    var lis=document.getElementsByTagName("li")

    for(var i=3i<lis.lengthi++){

        lis[i].style.display="none"

    }

}

</script>

还有一种更好的方法是用css来直接实现，无须js代码：

<style>

ul li:nth-child(n+4) {display:none}

</style>

<ul>

<li>111</li>

<li>222</li>

<li>333</li>

<li>444</li>

</ul>

需要准备的材料分别有：电脑、html编辑器、浏览器。

1、首先，打开html编辑器，新建html文件，例如：index.html，填写问题基础代码。

2、在index.html中的<script>标签，输入js代码：

function fun() {

if ($('#ChildMenu1').css('display') == 'none') {

$('#ChildMenu1').css('display', 'block')

} else {

$('#ChildMenu1').css('display', 'none')

}

}

3、浏览器运行index.html页面，此时点击按钮即可让菜单显示或隐藏。

用$("ul")遍历，然后逐个判断是否有li。判断是否有li有下面3种方法：

$("ul").has("li").length > 0$("ul > li").length > 0$("ul").find("li").length > 0

以下是完整代码：

<ul>111</ul>

<ul>

<li>1</li>

<li>2</li>

</ul>

<ul>333</ul>

<script src="https://cdn.staticfile.org/jquery/1.11.2/jquery.min.js"></script>

<script>

 $("ul").each(function(){

     if($(this).find("li").length>0)

         $(this).hide()

 })

</script>