JavaScript jQuery遍历对象each()方法

最新推荐文章于 2023-11-16 22:16:57 发布

柒边形选手

最新推荐文章于 2023-11-16 22:16:57 发布

阅读量6.1k

点赞数 2

分类专栏：笔记文章标签： javascript jquery 前端

本文链接：https://blog.csdn.net/m0_55201788/article/details/122902408

版权

笔记专栏收录该内容

85 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用jQuery的.each()方法遍历DOM元素，以及$.each()函数在数据处理中的应用，包括针对多个div元素设置不同颜色和计算总和。同时，展示了如何遍历数组和对象，通过实例展示了如何计算商品总价和件数。

摘要由CSDN通过智能技术生成

1遍历元素
jQuery隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作,就需要用到遍历。
语法1 :
$ ("div") . each (function (index, domEle) { XXX; } )
1. each()方法遍历匹配的每一个元素。主要用DOM处理。each 每一个
2.里面的回调函数有2个参数: index 是每个元素的索引号; demEle是每个DOM元素对象,不是jquery对象
语法2 :
$.each (object , function (index,element) { XXX; } )
1. $.each()方法可用于遍历任何对象。主要用于数据处理,比如数组,对象
2. 里面的函数有2个参数: index 是每个元素的索引号; element 遍历内容

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        $(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>

遍历每一个商品，计算总件数和总价钱

    // 5. 计算总计和总额模块
    getSum();
    function getSum() {
        var count = 0; // 计算总件数 
        var money = 0; // 计算总价钱
        $(".itxt").each(function(i, ele) {
            count += parseInt($(ele).val());
        });
        $(".amount-sum em").text(count);
        $(".p-sum").each(function(i, ele) {
            money += parseFloat($(ele).text().substr(1));
        });
        $(".price-sum em").text("￥" + money.toFixed(2));
    }

柒边形选手

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JavaScript jQuery遍历对象each()方法

1遍历元素jQuery隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作,就需要用到遍历。语法1 :$ ("div") . each (function (index, domEle) { XXX; } )1. each()方法遍历匹配的每一个元素。主要用DOM处理。each 每一个2.里面的回调函数有2个参数: index 是每个元素的索引号; demEle是每个DOM元素对象,不是jquery对象语法2 :$.each (object , function (index,
复制链接

扫一扫

专栏目录