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. maven引入jar包时，一个jar的引入错误，会导致后来的jar包的引入。

    maven引入本jar包时,引入失败. 问题是另一个jar没有引入正确.

  2. vim编译运行java程序

    想让你的vim可以编译运行java只要在你的配置文件里面加一句: map <F5> :!javac %&&java %:r <CR> 就可以编译运行java了

  3. BZOJ2780——[Spoj]8093 Sevenk Love Oimaster

    0.题意:给定N个原始字符串S,M次查询某个特殊的字符串S'在多少个原始串中出现过. 1.分析:这个题我们第一感觉就是可以用后缀自动机来搞,然后我们发现不是本质不同的字串..求出现过的次数,也就是说多 ...

  4. iOS 开发 初级：应用内购买 In-App Purchase

    http://blog.csdn.net/songrotek/article/details/8680415 现在有很多应用都使用了In-App Purchase,虽然对于很多用户来说,可能并不喜欢甚 ...

  5. caffe_windows安装

    CUDA:链接:http://pan.baidu.com/s/1nvyA3Qp 密码:h0f3 cudnn:链接:http://pan.baidu.com/s/1hr3Ug76 密码:vmdq caf ...

  6. (原)android中的动画(二)

    帧动画的使用需要在xml文件中指定每一帧所对应的图片 animation-list写法如下: <?xml version="1.0" encoding="utf-8 ...

  7. Android中的四种动画(一)

    TweenAnimation 变换动画(也叫作"补间动画"),有四种(alpha scale translate rote). FrameAnimation(也叫DrawableA ...

  8. Java中如何解决double和float精度不准的问题

    我们知道浮点数是无法在计算机中准确表示的,例如0.1在计算机中只是表示成了一个近似值,因此,对付点数的运算时结果具有不可预知性. 在进行数字运算时,如果有double或float类型的浮点数参与计算, ...

  9. 为什么要继承ActionSupport？

    struts2中的action可以继承ActionSupport,也可以不继承ActionSupport.不继承ActionSupport的情况只需要有一个方法,返回String,即可,记住,在继承A ...

  10. pycharm 中 pep8 检查开启.

    pycharm pep8检查的开启,默认是暗黄色,我这里为了醒目给改成了黄色.