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. 【C语言入门教程】7.4 共用体

    7.4 共用体 共用体又称为联合体,是由不同的数据类型组成的一个整体.与结构体不同的是,共用体每次只能使用其中一个成员.结构体的总长度是结构体所有成员长度之和,共用体的总长度是其中最长一个数据类型的长 ...

  2. MFC中CString转化为char*

    char* convertCStringToChars(CString string) { int nLength=string.GetLength(); ]; memset(c,,nLength+) ...

  3. 高性能滚动 scroll 及页面渲染优化

    最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作. 本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的 ...

  4. nginx反向代理、优化

    本优化适合apache,nginx,squid多种等web应用,特殊的业务也可能需要略作调.生产环境linux的内核优化 net.ipv4.tcp_fin_timeout = net.ipv4.tcp ...

  5. windows7 + cocos2d-x 3.2 +vs2012 速度真的很慢

    每次编译要大半天,简直伤不起,这样效率如何上的去???有谁有办法?

  6. spring边边角角

    我们在使用ssh框架的时候,很多人抱怨为什么之前都运行得好好的,第二天就报错了,我也是被这个问题纠结了很久. 我们来看看spring的配置文件: <?xml version="1.0& ...

  7. ubuntu 14 谷歌拼音输入法

    帮人倒腾了下,顺便记录下: https://rivercitylabs.org/install-google-pinyin-on-ubuntu-14-04/ sudo apt-get install ...

  8. MySql 导出excel

    select * into outfile './bestlovesky.xls' from bestlovesky where 1 order by id desc  limit 0, 50;

  9. JAVA 回调机制（callback）

    序言 最近学习java,接触到了回调机制(CallBack).初识时感觉比较混乱,而且在网上搜索到的相关的讲解,要么一言带过,要么说的比较单纯的像是给CallBack做了一个定义.当然了,我在理解了回 ...

  10. devstack查看服务日志

    执行如下指令: $ screen -x stack 同时按ctrl和a键,然后同时按shift和'键(即"),就可以浏览到服务列表: 上下翻到要查看的服务,进入即可看到当前的运行日志.重启就 ...