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. 初始Jquery--以及工厂函数

    一.JavaScript框架 1什么是JavaScript框架 普通JavaScript的缺点:每种控件的操作方式不统一,不同浏览器下有区别,要编写跨浏览器的程序非常麻烦.因此出现了很多对JavaSc ...

  2. PYTHON 自动化之路 （二）

    一.python 模块的使用 模块的使用: import os #调用 os 模块 cmd_s = os.popen("dir").read() #打开路径为结果保存为cmd_sp ...

  3. TMethod

    onclick是TNotifyEvent类型; type TNotifyEvent   =   procedure(Sender:   TObject)   of   object; 就是说他是一个过 ...

  4. Qt 官方一键动态发布技能

    苦找了好几天动态库,程序可以运行了,结果没有图标还是少了运行库很苦恼,发现Qt 官方有一键动态发布功能感觉自己萌萌的,来自qt吧亲测可用. 集成开发环境 QtCreator 目前生成图形界面程序 ex ...

  5. BZOJ 2466: [中山市选2009]树

    Sol 树形DP. 听说有非常神奇的高斯消元的做法...orz... 然而我只会 \(O(n)\) 的树形DP. 首先一个点的状态只于他的父节点和子树有关,跟他 子树的子树 和 父亲的父亲 都没有任何 ...

  6. centos PIL 安装

    http://itekblog.com/centos-6-x-install-pil-python-imaging-library-tutorial/

  7. ndk学习8: 编译动态库

    目录: 手工编译动态库 ndk-build编译动态库(Eclipse环境)   手工编译静态库 老规矩还是先手工操作,知其然并知其所以然   需要用到的核心命令: gcc -g -c -fpic -W ...

  8. idea 排除编译文件，恢复编译

  9. C#读写SQL Server数据库图片

    效果图: 下载链接: http://download.csdn.net/detail/u010312811/9492402 1.创建一个Winform窗体,窗体分为“数据上传”和“数据读取”两部分: ...

  10. ios block 导致的循环引用

    [[NSNotificationCenter defaultCenter] addObserverForName:@"UIWindowDidRotateNotification" ...