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. 正则表达式学习笔记（附：Java版示例代码）

    具体学习推荐:正则表达式30分钟入门教程 .         除换行符以外的任意字符\w      word,正常字符,可以当做变量名的,字母.数字.下划线.汉字\s        space,空白符 ...

  2. HDU 5384 字典树、AC自动机

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=5384 用字典树.AC自动机两种做法都可以做 #include<stdio.h> #includ ...

  3. [转载]Linux下tomcat的catalina.out文件过大,以及目录更改解决办法

    原文链接:http://liyan0524.iteye.com/blog/1285644 方法1—分割流 使用cronolog工具切分Tomcat的catalina.out日志文件 cronolog一 ...

  4. Qt5 任务栏托盘功能实现

    23333 有一阵子没写博客了,研究了挺长时间qt,学到任务栏托盘时简直无语,网上找得到的代码大多是废码,Qt5不支持或者本身就有毛病不能实现却被n多人转来转去的,甚是无语. 简单托盘功能以下在Qt5 ...

  5. Linux 查看磁盘空间大小

    (1)查看文件大小 1. 查看当前文件夹下所有文件大小(包括子文件夹)    du -sh   2.查看var目录下文件大小   du -sh var   3.查看指定文件夹下所有文件大小(包括子文件 ...

  6. NDK学习一: 环境搭建Eclipse篇

    下载NDK 国内的一个镜像站点 下载速度比较快 http://wear.techbrood.com/tools/sdk/ndk/#Installing 网上搭建环境的方案有很多 1. Eclipse ...

  7. SharePoint更改密码

    stsadm –o updatefarmcredentials –userlogin DomainName\UserName -password NewPassword –local  1. 通过管理 ...

  8. Java GUI学习笔记之初识AWT和Swing

    Frame f = new Frame(); //获取显示器的尺寸 Dimension screenSize = Toolkit.getDefaultToolkit().getScreenSize() ...

  9. python模块名和文件名冲突解决

    对于python初学者,很容易练习到一个随机数生成的程序,代码如下: #!/usr/bin/python import random print(random.randint(12,20)) 这个小程 ...

  10. Python 之 【markdown 模块的学习】

    摘要: markdown工具,可以将txt转化成html格式.这一类工具的作用是将按一定格式写成的可读性强的文本文件转化为结构化的标准xhtml或html.Linux 下面也有markdown: zh ...