jQuery隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历。

语法：

1.each0方法遍历匹配的每一个元素。主要用DOM处理。each每一个

⒉里面的回调函数有2个参数:index是每个元素的索引号; demEle是每个DOM元素对象，不是jquery对象

3.所以要想使用jquery方法，需要给这个dom元素转换为jquery对象$(domEle)

代码示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>04-jQuery遍历元素</title>
    </head>
    <body>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <script src="jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function() {
                // $("div").css("color","red");
                //如果针对于同一类元素做不同操作，需要用到遍历元素（类似for，但是比for强大)
                var sum = 0;
                // 1. each()方法遍历元素
                var arr = ["red", "green", "blue"];
                $("div").each(function(i, domEle) {
                    //回调函数第一个参数一定是索引号  可以自己指定索引号号名称
                    // console.log(index);
                    // console.log(i);
                    //回调函数第二个参数一定是  dom元素对象 也是自己命名
                    // console.log(domEle);
                    // domEle.css("color"); dom对象没有css方法
                    $(domEle).css("color", arr[i]);
                    sum += parseInt($(domEle).text());
                })
                console.log(sum);
                // 2． $.each)方法遍历元素主要用于遍历数据，处理数据
                // $.each($("div"),function(i,ele){
                //     console.log(i);
                //     console.log(ele);
                // })
                $.each(arr, function(i, ele) {
                    console.log(i);
                    console.log(ele);
                })
                $.each({
                    name: "andy",
                    age: 18
                }, function(i, ele) {
                    console.log(i); //输出的是name age  属性名
                    console.log(ele); //输出的是andy  18  属性值
                })
            })
        </script>
    </body>
</html>

 

版权声明：本文为秋裤原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/lxr0606/p/16158701.html