                        课程
                    
                        /前端开发
                        
                            /jQuery
                        
                        /jQuery基础课程

为什么不能用循环来隐藏和显示li项？

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
        <title>挑战题</title>
    </head>
    
    <body onload="jiaZai()">
        <ul>
            <li>零</li>
            <li>壹</li>
            <li>贰</li>
            <li>叁</li>
            <li>肆</li>
            <li>伍</li>
            <li>陆</li>
        </ul>
        <a href="#" onclick="chage()"></a>
         <script type="text/javascript">
            var size = $("ul li").length;
            function jiaZai()
            {
                $("a").html("更多");
                for(var i=5;i<size;i++)
                {
                    $("li:eq(i)").hide();
                }
            }
            
            function chage(){
                if($("a").html()=="更多")
                {
                    $("a").html("简化");
                     for(var i=5;i<size;i++)
                    {
                        $("li:eq(i)").show();
                    }
                }
                if($("a").html()=="简化")
                {
                    $("a").html("更多");
                     for(var i=5;i<size;i++)
                    {
                        $("li.eq(i)").css("display","none");
                    }
                }
            }
        </script>
    </body>
</html>

1、中间的循环不能使用：

for(var i=5;i<size;i++)
{
     $("li:eq(i)").show();
}

为甚么呢？

2、然后，JQuery代码写在了body中，若写在head中，取各个元素怎么改呢？我试过$("body li:eq(1)").html();这样不对呀

举个栗子233

2015-08-10

源自：jQuery基础课程 3-13

关注问题我要回答

390

操作

收起

2 回答

慕慕5269554
2015-08-10

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
        <title>挑战题</title>
    </head>

    <body onload="jiaZai()">
        <ul>
            <li>零</li>
            <li>壹</li>
            <li>贰</li>
            <li>叁</li>
            <li>肆</li>
            <li>伍</li>
            <li>陆</li>
        </ul>
        <a href="#" onclick="chage()"></a>
         <script type="text/javascript">
            var size = $("ul li").length;
            function jiaZai()
            {
                $("a").html("更多");

                for(var i=5;i<size;i++)
                {
                  $("li").eq(i).hide();
                }
            }

            function chage(){
                if($("a").html()=="更多")
                {
                    $("a").html("简化");
                     for(var i=5;i<size;i++)
                    {
                        $("li").eq(i).show();
                    }
                }else if($("a").html()=="简化")
                {
                    $("a").html("更多");
                     for(var i=5;i<size;i++)
                    {
                        $("li").eq(i).hide();
                    }
                }
            }
        </script>
    </body>
</html>

0 回复有任何疑惑可以回复我~

收起回答

慕慕5269554
2015-08-10

一，eq(1)不能这么写，不能用（）应该用[]

二，chage()里面if一直执行下来你是看不到变化的你加个else就看到了

0 回复有任何疑惑可以回复我~

收起回答

举个栗子233 提问者

一、"通过调用$("li:eq(3)")过滤选择器代码"——这是JQuery基础课程"3-2:eq(index)过滤选择器"节里介绍的用法，跟我写的一样呀，怎么用[]方括号呢？还有你下面这种方法：$("li").eq(i).hide(); 二、第二问我问的是若把JQuery写在<head></head>中，如何获取各个元素（如、li）呢？ $("li")或$("body li")均不能获取。

2015-08-10 回复有任何疑惑可以回复我~

慕慕5269554 回复举个栗子233 提问者

第一问按$("li").eq(i).hide();这么写第二问你写在head里先加载了js所以没有或得li，你可以用onload获取

2015-08-11 回复有任何疑惑可以回复我~