zoukankan html css js c++ java

jq的each理解

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>

查看全文

相关阅读:
字符串语法
 组合数
 并查集
 Java Collection HashMap源码分析
 Java 虚拟机 ClassLoader
Java 多线程 Future
Java 虚拟机 GC机制
 Java 基础原生类型
 Java 多线程死锁deadlock产生原因+避免方法
 Java 基础基本类型vs引用类型，传值vs传引用

原文地址：https://www.cnblogs.com/yizhilin/p/6103682.html