li[1].css("color","blue"); // 问题:li是个数组,为什么这里加上[i]会没有效果?换成index也不行,为什么呢?

来源:6-10 jQuery遍历之each()

慕粉18221508921

2016-12-17 22:07

<!DOCTYPE html>

<html>


<head>

    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title></title>

    <style>

    .left {

        width: auto;

        height: 150px;

    }

    

    .left div {

        width: 150px;

        height: 120px;

        padding: 5px;

        margin: 5px;

        float: left;

        background: #bbffaa;

        border: 1px solid #ccc;

    }

    </style>

    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>

</head>


<body>

    <h2>each方法</h2>

    <div class="left first-div">

        <div class="div">

            <ul>

                <li>list item 1</li>

                <li>list item 2</li>

                <li>list item 3</li>

            </ul>

        </div>

        <div class="div">

            <ul>

                <li>list item 4</li>

                <li>list item 5</li>

                <li>list item 6</li>

            </ul>

        </div>

    </div>


    <br/>

    <button>点击:each方法遍历元素</button>

    <button>点击:each方法回调判断</button>

    <script type="text/javascript">

    $("button:first").click(function() {

        //遍历所有的li

        //修改每个li内的字体颜色

        

        $("li").each(function(index, element) {

            $(this).css('color','red')

        })


    })

    </script>

    <script type="text/javascript">

    $("button:last").click(function() {

        //遍历所有的li

        //修改偶数li内的字体颜色

        var li=$("li");

        li.each(function(index,element){

            

            if(index%2){

                li[1].css("color","blue");

            // 问题:li是个数组,为什么这里加上[i]会没有效果?换成index也不行,为什么呢?

            }

        });

        //在javascript中0代表false,非0代表true

        // $("li").each(function(index, element) {

        //     if (index % 2) {

        //         $(this).css('color','blue')

        //     }

        // });

    }) 

    </script>

</body>


</html>


写回答 关注

2回答

  • 虚年_640
    2016-12-17 23:36:45
    已采纳

    console.log(li[1]);

    输出的是三个标签内容,不是dom对象

    http://img.mukewang.com/58555b610001353802970050.jpg

    不妨把li[1]改为eq(1)

    console.log(li.eq(1));

    打印的是,是可以操作dom元素的

    http://img.mukewang.com/58555ade00015cee03540161.jpg



    慕粉1822... 回复虚年_640

    这个我知道,用的话,一般都是,$("li:eq(0)"),这样的话,$("li:eq(index)")就跑不出来,一般用其他办法解决,然后你直接用$("li").eq(index)就实现了,,,所以好奇,,,怎么可以直接这样用的,没见过,然后我用$("li").first就不行,,,,

    2016-12-19 12:08:17

    共 4 条回复 >

  • 大块吃肉188
    2016-12-19 14:24:56

    jquery对象是一个类似数组的对象,可以通过[index]的方法得到相应的DOM对象

    var lis = $('li');  //这是jq对象

    var li = lis[0];  //这是DOM对象

    你写的li[1].css这是DOM对象用jquery的方法,当然不行啦

    li.eq[index]这才是jq的方法。

    刚开始学很容易二者的一些方法记混淆,多用就好啦

    慕粉1822...

    学习学习了,谢谢指导哇 :-)

    2016-12-20 14:00:10

    共 1 条回复 >

jQuery基础(二)—DOM篇

jQuery第二阶段开启DOM修炼,了解创建、插入、删除与替换

114012 学习 · 590 问题

查看课程

相似问题