【Java 进阶篇】JQuery 遍历 —— `each()` 方法的奇妙之旅

news2024/10/7 16:22:31

在这里插入图片描述

在前端的世界里，操作元素是我们开发者最为频繁的任务之一。为了更好地操控页面上的元素，JQuery 提供了许多强大的工具，其中 each() 方法是一颗璀璨的明星。本文将深入探讨 each() 方法的原理和用法，带你踏上一场遍历之旅。

起步：了解 `each()` 方法

each() 方法是 JQuery 中一个强大而灵活的遍历工具。它被设计用于迭代集合中的元素，并为每个元素执行指定的函数。这个函数可以用来完成各种任务，比如修改元素的样式、绑定事件，或者执行其他自定义操作。

在开始 each() 方法的奇妙之旅之前，让我们先了解一下它的基本语法：

$.each(collection, function(index, value) {
    // 对每个元素执行的操作
});

collection：要遍历的集合，可以是数组、对象或类数组对象。
function(index, value)：在集合中每个元素上执行的函数，其中 index 是元素的索引，value 是元素的值。

看代码如何行动

让我们通过一个简单的例子，感受一下 each() 方法的魅力。在这个例子中，我们有一个包含数字的数组，我们将使用 each() 方法遍历数组，并将每个数字输出到控制台：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery each() 方法示例</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
    <script>
        $(document).ready(function() {
            // 定义一个包含数字的数组
            var numbers = [1, 2, 3, 4, 5];

            // 使用 each() 方法遍历数组
            $.each(numbers, function(index, value) {
                // 输出每个数字到控制台
                console.log("第" + (index + 1) + "个数字是：" + value);
            });
        });
    </script>
</body>
</html>

在这个例子中，我们通过 each() 方法遍历了 numbers 数组，并使用回调函数输出了每个数字到控制台。这展示了 each() 方法的简单用法，但实际上它的应用远不止于此。

更进一步：灵活应用 `each()` 方法

遍历数组

each() 方法对数组的遍历是最为直观的。在下面的例子中，我们使用 each() 方法遍历一个包含颜色名称的数组，并在页面上创建对应颜色的块元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery each() 方法示例</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <style>
        .color-block {
            width: 100px;
            height: 100px;
            margin: 5px;
            display: inline-block;
        }
    </style>
</head>
<body>
    <script>
        $(document).ready(function() {
            // 定义一个包含颜色名称的数组
            var colors = ["red", "green", "blue", "yellow", "purple"];

            // 使用 each() 方法遍历数组，并创建对应颜色的块元素
            $.each(colors, function(index, value) {
                // 创建块元素
                var block = $("<div></div>").addClass("color-block").css("background-color", value);
                // 在 body 中追加块元素
                $("body").append(block);
            });
        });
    </script>
</body>
</html>

在这个例子中，我们使用 each() 方法遍历了 colors 数组，并根据每个颜色创建了一个块元素。通过这样的方式，我们可以动态地生成页面上的元素，而不需要手动编写每个元素的代码。

遍历对象

each() 方法不仅可以用于数组，还可以用于遍历对象的属性。在下面的例子中，我们有一个包含学生信息的对象，我们使用 each() 方法遍历这个对象，并在页面上显示学生的姓名和年龄：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery each() 方法示例</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
    <script>
        $(document).ready(function() {
            // 定义一个包含学生信息的对象
            var students = {
                student1: { name: "Alice", age: 20 },
                student2: { name: "Bob", age: 22 },
                student3: { name: "Charlie", age: 21 }
            };

            // 使用 each() 方法遍历对象，并显示学生的姓名和年龄
            $.each(students, function(studentId, studentInfo) {
                // 创建包含学生信息的字符串
                var studentString = "学生ID：" + studentId + "，姓名：" + studentInfo.name + "，年龄：" + studentInfo.age;
                // 在 body 中追加包含学生信息的段落
                $("body").append("<p>" + studentString + "</p>");
            });
        });
    </script>
</body>
</html>

在这个例子中，我们定义了一个包含学生信息的对象 students，然后使用 each() 方法遍历了这个对象。在遍历的过程中，回调函数的参数 studentId 是对象的属性名，studentInfo 是属性值（也是一个对象，包含学生的姓名和年龄）。我们通过这些信息创建了包含学生信息的字符串，并将它们显示在页面上。

修改元素属性

each() 方法不仅可以用于遍历集合，还可以在遍历的过程中修改元素的属性。在下面的例子中，我们使用 each() 方法遍历包含图片路径的数组，并将这些路径应用到页面上的图片元素的 src 属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery each() 方法示例</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
    <img id="image1" alt="Image 1">
    <img id="image2" alt="Image 2">
    <img id="image3" alt="Image 3">

    <script>
        $(document).ready(function() {
            // 定义一个包含图片路径的数组
            var imagePaths = ["path/to/image1.jpg", "path/to/image2.jpg", "path/to/image3.jpg"];

            // 使用 each() 方法遍历数组，并修改图片元素的 src 属性
            $.each(imagePaths, function(index, path) {
                // 构建图片元素的 ID
                var imageId = "image" + (index + 1);
                // 修改图片元素的 src 属性
                $("#" + imageId).attr("src", path);
            });
        });
    </script>
</body>
</html>