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语言入门教程】2.4 浮点型数据

    浮点型数据又称实型数据,是一个以十进制表示的符号实数.符号实数的值包括整数部分.尾数部分和指数部分. 2.4.1 浮点型常量 一些较大的数值,或者有小数位.指数位的数值都需要用浮点型常量表示.浮点型常 ...

  2. javascript高级程序设计---拖拉事件

    拖拉事件 拖拉指的是,用户在某个对象上按下鼠标键不放,拖动它到另一个位置,然后释放鼠标键,将该对象放在那里. 拖拉的对象有好几种,包括Element节点.图片.链接.选中的文字等等.在HTML网页中, ...

  3. 《Lua程序设计 第二版》学习笔记一

    Lua简介 Lua是一种简单.可拓展.可移植及高效的脚本语言. 开始 Lua之间不需要分隔符 运行方式: Linux下: lua -i prog dofile("lib1.lua" ...

  4. cocos2d界面渲染

    渲染是visit函数来做的, visit是先将不可见的节点和他所有的子节点都跳过, 然后再看节点的子节点是否为空, 如果为空的话直接看这个节点是否在摄像机可见范围之内, 如果在就渲染这个节点, 否则什 ...

  5. 剑指Offer 反转链表

    题目描述 输入一个链表,反转链表后,输出链表的所有元素.     思路: 法1:用栈,压栈出栈 法2:头插法(有递归非递归2中)   AC代码: /* struct ListNode { int va ...

  6. ejs模板

    nodejs的模板引擎有很多, ejs是比较简单和容易上手的.常用的一些语法: 用<%...%>包含js代码 用<%=...%>输出变量 变量若包含 '<' '>' ...

  7. centos 终端 字体颜色

    默认情况下,没有颜色. https://www.centos.org/docs/2/rhl-gsg-en-7.2/ls-color.html git也默认没有颜色,破解如下: git config - ...

  8. ndk学习9: 动态使用共享库

    动态使用共享库函数 dll_main      环境介绍 续上节代码 目录结构:   android.mk如下: LOCAL_PATH := $(call my-dir) include $(CLEA ...

  9. Java BigDecimal使用

    //除法:精确到后4位BigDecimal a = new BigDecimal(1213); BigDecimal b = new BigDecimal(10302); BigDecimal rat ...

  10. Centos安装firefox/chrome

    centos安装chrome:去官网下载chrome安装包(xxx.rpm),带软件安装工具的系统双击该xxx.rpm就能自动安装,或者sudo rpm -i xxx.rpm安装. centos卸载自 ...