1种 通过each遍历li 可以获得所有li的内容

    <!-- 1种 -->

    <ul class="one">

        <li>11a</li>

        <li>22b</li>

        <li>33c</li>

        <li>44d</li>

        <li>55e</li>

    </ul>

    <button>输出每个li值</button>

<script>

    // 1种 通过each遍历li 可以获得所有li的内容

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

        $(".one > li").each(function(){

            // 打印出所有li的内容

            console.log($(this).text());

        })

    });

</script>

2种 通过each遍历li 通过$(this)给每个li加事件

    <!-- 2种 -->

    <ul class="two">

        <li>2222</li>

        <li>22b</li>

        <li>3333</li>

        <li>44d</li>

        <li>5555</li>

    </ul>

<script>

    // 2种 通过each遍历li 通过$(this)给每个li加事件

    $('.two > li').each(function(index) {

        console.log(index +":" + $(this).text());

        // 给每个li加click 点那个就变颜色

        $(this).click(function(){

            alert($(this).text());

            $(this).css("background","#fe4365");

        });

    });

</script>

4种 遍历所有li 给所有li添加 class类名

    <!-- 4种 -->

    <ul class="ctn3">

        <li>Eat</li>

        <li>Sleep</li>

        <li>3种</li>

    </ul>

    <span>点击3</span>

<script>

    // 4种 遍历所有li 给所有li添加 class类名

    $('span').click(function(){

        $('.ctn3 > li').each(function(){

            $(this).toggleClass('example');

        })

    });

</script>

5种  在each()循环里 element == $(this)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>each练习2</title>

    <style>

        div {

            width: 40px;

            height: 40px;

            margin: 5px;

            float: left;

            border: 2px blue solid;

            text-align: center;

        }

        span {

            width: 40px;

            height: 40px;

            color: red;

        }

    </style>

</head>

<body>

    <div></div>

    <div></div>

    <div></div>

    <div id="stop">Stop here</div>

    <div></div>

    <div></div>

    <button>Change colors</button>

    <span></span>

</body>

<script src="jquery-1.11.1.min.js"></script>

<script >

     // 在each()循环里 element == $(this)

    $('button').click(function(){

        $('div').each(function(index,element){

            //element == this;

            $(element).css("background","yellow");

            if( $(this).is("#stop")){

                $('span').text("index :" + index);

                return false;

            }

        })

    })

</script>

</html>

随机推荐

  1. 【C语言入门教程】4.4 指针 与 指针变量

    在程序中声明变量后,编译器就会为该变量分配相应的内存单元.也就是说,每个变量在内存会有固定的位置,有具体的地址.由于变量的数据类型不同,它所占的内存单元数也不相同.如下列声明了一些变量和数组. int ...

  2. iOS resign code with App Store profile and post to AppStore

    http://stackoverflow.com/questions/17545452/ios-resign-code-with-app-store-profile-and-post-to-appst ...

  3. webApp前端开发技巧总结

    自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应用程序,运行在高端的移动终端设备.我相信各位童鞋应该和我一个样子, ...

  4. nginx反向代理、优化

    本优化适合apache,nginx,squid多种等web应用,特殊的业务也可能需要略作调.生产环境linux的内核优化 net.ipv4.tcp_fin_timeout = net.ipv4.tcp ...

  5. C++ stringstream

    C++ 引入了ostringstream.istringstream.stringstream这三个类,这三个类包含在sstream.h头文件中.三个类中 1)istringstream类用于执行C+ ...

  6. Android学习笔记（十四）——自定义广播

    //此系列博文是<第一行Android代码>的学习笔记,如有错漏,欢迎指正! 我们除了可以通过广播接收器来接收系统广播, 还可以在应用程序中发送自定义的广播.下面我们来分别试一试发送自定义 ...

  7. 流畅web动画的十个法则

    from me: web动画能够带来一个非常酷炫的效果,能够让页面有一个更好的用户体验.对于良好的动画性能没有高招,除了将大量的时间放在测试和优化,当然最重要的还是要易于维护. 流畅web动画的十大法 ...

  8. [POJ1177]Picture

    [POJ1177]Picture 试题描述 A number of rectangular posters, photographs and other pictures of the same sh ...

  9. hiho #1151 : 骨牌覆盖问题·二 （递推，数论）

    #1151 : 骨牌覆盖问题·二 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 上一周我们研究了2xN的骨牌问题,这一周我们不妨加大一下难度,研究一下3xN的骨牌问题? ...

  10. 思科 vlan 相关操作

    添加或者修改VLAN Switch(config)# vlan vlan-id Switch(config-vlan)# name vlan-name 删除VLAN Switch(config)# n ...