美文网首页前端
jQuery中的each()方法

jQuery中的each()方法

作者: 马佳乐 | 来源:发表于2022-03-18 08:08 被阅读0次
    • jQuery的隐式迭代会对所有的DOM对象设置相同的值,但是如果我们需要给每一个对象设置不同的值的时候,就需要自己进行迭代了。
    • each()作用:遍历jQuery对象集合,为每个匹配的元素执行一个函数
      语法格式:
      $(元素) .each(function(index ,element){});
      参数1表示当前元素在所有匹配元素中的索引号
      参数2表示当前元素(DOM对象)

    练习:

    <!DOCTYPE html>
    
    <html lang="en">
    
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                ul {
                    list-style: none;
                    width: 1000px;
                }
                
                li {
                    float: left;
                    width: 200px;
                    height: 200px;
                    background: pink;
                    text-align: center;
                    line-height: 200px;
                    margin: 0 20px 20px 0;
                }
            </style>
    
        </head>
    
        <body>
            <ul id="ulList">
                <li>什么都看不见</li>
                <li>什么都看不见</li>
                <li>什么都看不见</li>
                <li>什么都看不见</li>
                <li>什么都看不见</li>
                <li>什么都看不见</li>
                <li>什么都看不见</li>
                <li>什么都看不见</li>
                <li>什么都看不见</li>
                <li>什么都看不见</li>
            </ul>
        </body>
    
    </html>
    <script src="js/jquery.js"></script>
    <script>
        $(function() {
    
            //      for(var i = 0; i < $("li").length; i++) {
            //        $("li").eq(i).css("opacity", (i+1)/10);
            //      }
            //each方法
            $("li").each(function(index, element) {
                $(element).css("opacity", (index + 1) / 10);
            });
    
        });
    </script>
    

    相关文章

      网友评论

        本文标题:jQuery中的each()方法

        本文链接:https://www.haomeiwen.com/subject/tsgjdrtx.html