zoukankan      html  css  js  c++  java
  • jQuery 遍历each()的使用方法

    .each()是一个for循环的包装迭代器
    .each()通过回调的方式处理,并且会有2个固定的实参,索引与元素(从0开始计数)
    .each()回调方法中的this指向当前迭代的dom元素

    遍历方法:
    <div class="left first-div">
        <div class="div">
            <ul>
                <li>111111111111</li>
                <li>22222222222</li>
                <li>3333333333</li>
            </ul>
        </div>
        <div class="div">
            <ul>
                <li>4444444444</li>
                <li>555555555</li>
                <li>666666666</li>
            </ul>
        </div>
    </div>
    
    <br/>
    <button class="click">遍历元素</button>
    <style>
        .left {
            width: auto;
            height: 150px;
        }
    
        .left div {
            width: 150px;
            height: 120px;
            padding: 5px;
            margin: 5px;
            float: left;
            background: #bbffaa;
            border: 1px solid #ccc;
        }
    </style>
    <script type="text/javascript">
        $(".click").click(function() {
            $("li").each(function(index, element) { //遍历所有的li
                $(this).css('color','red') //修改每个li内的字体颜色
            })
        })
    </script>

    效果图:

    回调函数方法:

    div和样式跟之前遍历的一样

    
    
    <button class="click">回调判断</button>
    <script type="text/javascript">
        $(".click").click(function() {
            $("li").each(function(index, element) { //遍历所有的li
                if (index % 2) {  //修改偶数li内的字体颜色
                    $(this).css('color','blue')
                }
            })
        })
    </script>

    效果图:

  • 相关阅读:
    第5次作业
    第六次作业
    第五次作业
    软件需求最佳实践阅读笔记05
    软件需求最佳实践阅读笔记04
    构建民航知识图谱
    软件需求最佳实践阅读笔记03
    软件需求最佳实践阅读笔记02
    软件需求最佳实践阅读笔记01
    程序员的自我修养阅读笔记03
  • 原文地址:https://www.cnblogs.com/amy-1205/p/5864168.html
Copyright © 2011-2022 走看看