jQuery资料之遍历元素

最新推荐文章于 2024-08-15 19:25:35 发布

原创最新推荐文章于 2024-08-15 19:25:35 发布 · 299 阅读

0 ·

CC 4.0 BY-SA版权

jQuery 专栏收录该内容

14 篇文章

订阅专栏

这篇博客介绍了jQuery中遍历元素的两种方法：each方法适用于DOM元素处理，内部回调函数接收索引和DOM元素；$.each()方法用于数据处理，如数组和对象，回调函数接收索引和元素内容。

◆ 遍历元素：

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

方法一：

$('div').each(function (index, domEle) { xxx, } )

each方法遍历匹配每个元素，主要用DOM处理。
里面的回调函数有2个参数：index为每个元素的索引号，domEle是每个DOM元素对象，不是jQuery对象
所以要想使用jQuery方法，需要给这个DOM元素转换为jQuery对象$(domEle)

方法二：

$.each(object, function (index, element) { xxx, } )

$.each()方法可以遍历任何对象。主要用于数据处理，比如数组、对象、
里面的函数有2个参数：index为每个元素的索引号，element为内容

◆ 示例：

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        $(function() {
            var sum = 0;
            var arr = ["red", "green", "blue"];
            // 1. each() 方法遍历元素 
            $("div").each(function(i, domEle) {
                // 回调函数第一个参数一定是索引号  可以自己指定索引号号名称
                // console.log(i);
                // 回调函数第二个参数一定是 dom 元素对象，也是自己命名
                // console.log(domEle);  // 使用jQuery方法需要转换 $(domEle)
                $(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>