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. Redhat EL安装curses

    1.下载curses安装包 http://ftp.gnu.org/pub/gnu/ncurses/ncurses-5.6.tar.gz2. tar -zxvf  nurses-5.6.tar.gz 3 ...

  2. _beginThreadex创建多线程解读【转】

    _beginThreadex创建多线程解读 一.需要的头文件支持 #include <process.h>         // for _beginthread() 需要的设置:Proj ...

  3. css3延时动画

    不太理解属性都是什么意思,但是有动画效果,我也是惊呆了 <style> #animated_div{animation:animated_div 4s 1; -moz-animation: ...

  4. 学习高博SLAM（1）

    这几天按照高博的博客做了一起做RGB-D SLAM (1)和(2) ,,其中大部分步骤都没问题 开发环境是ubuntu14.04+indigo 有几个问题就是: (1)我的电脑不能加载PPA,原因是: ...

  5. 思科 vlan 相关操作

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

  6. Hello 2016

    Hello 2016 I am really happy to work and study here. Nothing is better than be oneself ! It's import ...

  7. nc 局域网聊天+文件传输(netcat)

    nc 局域网聊天+文件传输 nc的全程是netcat,这个工具非常好用. 有时候我们需要在局域网内传送一些文本消息或者文件的时候,通常的做法是安装一些局域网通讯软件,然后来做.其实不必要这样,使用nc ...

  8. svn: E155004 'XX' is already locked

    Error:svn: E155004: Run 'svn cleanup' to remove locks (type 'svn help cleanup' for details)svn: E155 ...

  9. php上传文件大小限制修改

    打开php.ini 1.最大上传文件大小: upload_max_filesize=2M 改成自己需要的大小 2.最大post大小: post_max_size=2M 改成自己需要的大小,第二个一般比 ...

  10. POJ 2388(排序)

    http://poj.org/problem?id=2388 题意:就N个数的中位数. 思路:用快排就行了.但我没用快排,我自己写了一个堆来做这个题.主要还是因为堆不怎么会,这个拿来练练手. #inc ...