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. Ubuntu 14 添加Windows风格的底部任务栏

    习惯了Windows风格的底部任务栏,而Ubuntu 14是没有的,还好有人做好了一个任务栏插件,可以在线安装: 1.打开终端(Ctrl+Alt+T),然后输入下面的命令 sudo apt-get i ...

  2. Redis学习笔记四：独立功能之发布与订阅

    客户端可以通过执行 subscribe 命令订阅一个或多个频道,每当有其他客户端向被订阅的频道发送消息时,频道所有的订阅者都会收到这条消息. 客户端还可以通过执行 psubscribe 命令订阅一个或 ...

  3. 如何使用java自定义注解?demo

    1.Description.java package kzfy.bk.com; import java.lang.annotation.Documented; import java.lang.ann ...

  4. r-cnn学习(一)

    http://closure11.com/rcnn-fast-rcnn-faster-rcnn%E7%9A%84%E4%B8%80%E4%BA%9B%E4%BA%8B/ 首先看fast r-cnn这篇 ...

  5. java代码生成二维码以及解析二维码

    package com.test; import java.awt.Color; import java.awt.Graphics2D; import java.awt.image.BufferedI ...

  6. 2016-03-12 Leanning Plan

    1,Python 2,Java 3,Html+Css 4,PHP 5,Crawl 6,WetChat Platform

  7. centos PIL 安装

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

  8. 深入浅出Mybatis-与Spring集成

    单独使用mybatis是有很多限制的(比如无法实现跨越多个session的事务),而且很多业务系统本来就是使用spring来管理的事务,因此mybatis最好与spring集成起来使用. 前置要求 版 ...

  9. 【MySQL】MySQL 如何实现 唯一随机数ID

    如果不是 UUID 好像比较困难 参考资料: http://bbs.csdn.net/topics/390001507 https://www.zhihu.com/question/20151242

  10. Redis系列-配置文件小结

    如果不指定配置文件,Redis也可以启动,此时,redis使用默认的内置配置.不过在正式环境,常常通过配置文件[通常叫redis.conf]来配置redis. redis.conf配置格式如下: ke ...