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. Hibernate面试题

    一.谈一谈Hibernate的缓存机制 1.一级缓存: 内部缓存存在于HIbernate中又叫一级缓存,他属于应用事务级缓存. 2.二级缓存: 01.应用级缓存. 02.分布式缓存. 条件:数据不会被 ...

  2. 关于网页控件设置成disabled以后，提交不到后台的问题

    在开发的时候经常遇到这样的问题,就是需要设置某个控件不可编辑,这个控件可能是一个input文本框,可能是一个select下拉列表 遇到这样的问题,一般有两种处理方法 第一种是将input 控件添加 d ...

  3. PHP Socket实现websocket（一）基本函数介绍

    WebSocket protocol 是HTML5一种新的协议.它实现了浏览器与服务器全双工通信(full-duplex). 一开始的握手需要借助HTTP请求完成. WebSocket是基于TCP来实 ...

  4. 五款最佳Linux下载管理器推荐

    导读 新的Linux用户从Windows转换过来时面临的困难之一就是,找到一款优秀的下载管理器.如果你是或曾经是Windows用户,可能熟悉互联网下载管理器(IDM).下载加速器Plus(DAP)之类 ...

  5. centos7 关闭firewall安装iptables并配置

    一.配置防火墙,开启80端口.3306端口 CentOS 7.0默认使用的是firewall作为防火墙,这里改为iptables防火墙. 1.关闭firewall: systemctl stop fi ...

  6. python 随笔(property & __class__)

    1. 属性装饰器: property @property def errors(self): """ Returns a list of form.errors for ...

  7. 【转】Oracle当中扫描数据的方法

    本文将对oracle当中扫描数据的存取方法进行介绍. 1) 全表扫描(Full Table Scans, FTS) 为实现全表扫描,Oracle读取表中所有的行,并检查每一行是否满足语句的WHERE限 ...

  8. Jenkins 报错：(pending—Waiting for next available executor)

    系统管理-管理节点,刷新状态

  9. HTK搭建语音拨号系统实验材料下载

    选自:http://maotong.blog.hexun.com/6267266_d.html 压缩包包括全部的配置文件,脚本文件,必备的模型文件和实验手册. 全部实验材料的下载链接: 1 http: ...

  10. 【leetcode】Minimum Path Sum

    Minimum Path Sum Given a m x n grid filled with non-negative numbers, find a path from top left to b ...