jQuery中each()方法用法实例

当需要对jQuery元素集合进行遍历操作时，可以使用jQuery的each()方法。本文将详细讲解each()方法的用法及实例。

1. each()方法的语法

$.each(object, function(index, element){
    // 迭代处理逻辑
});

其中：

object是要进行迭代的集合，可以是数组或对象；
function是对集合中的每个元素进行处理的回调函数；
index是当前迭代元素的索引；
element是当前迭代的元素。

回调函数里的this指向当前迭代元素。

2. each()方法使用示例

示例一：遍历数组

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>each()方法示例一</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
    $(function(){
        // 数组迭代
        var arr = [1, 2, 3, 4, 5];
        $.each(arr, function(index, element){
            console.log(index, element);
        });
    });
    </script>
</head>
<body>
    <!-- 页面内容区域 -->
</body>
</html>

上述代码中，创建一个数组arr，包含五个数字。然后使用each方法遍历数组arr，将每个元素的索引和数值输出到控制台。

示例二：遍历对象

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>each()方法示例二</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
    $(function(){
        // 对象迭代
        var obj = {
            "name": "Tom",
            "age": 18,
            "sex": "male"
        };
        $.each(obj, function(key, value){
            console.log(key, value);
        });
    });
    </script>
</head>
<body>
    <!-- 页面内容区域 -->
</body>
</html>

上述代码中，创建一个对象obj，包含三个属性，分别是name、age、sex。然后使用each方法遍历对象obj，将每个属性名称和属性值输出到控制台。

3. 总结

通过上述示例，我们可以了解到如何使用each()方法对数组和对象进行遍历，以及如何在回调函数中获取元素的索引和值。温馨提示，当需要在遍历操作中修改jQuery集合中的元素时，建议使用jQuery的map()方法来替代each()方法实现。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery中each()方法用法实例 - Python技术站