首页 > 代码库 > jq的each理解

jq的each理解

2024-08-23 08:40:55   223人阅读

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>

 

jq的each理解


联系
我们