jq的each理解

2016-11-26 11:42:06来源:cnblogs.com作者:云悠人点击

第七城市

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>

 

第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台