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

爱被打了一巴掌 2024-02-18 11:15 88阅读 0赞

![在这里插入图片描述][fe098e18bcc24ed2aaff6195ef3f5a1a.png]

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

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

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

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

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

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

### 看代码如何行动 ###

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

在这个例子中，我们通过 `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>

在这个例子中，我们定义了一个包含图片路径的数组 `imagePaths`，然后使用 `each()` 方法遍历了这个数组。在遍历的过程中，我们通过拼接字符串构建了每个图片元素的 ID，然后使用 `attr()` 方法修改了图片元素的 `src` 属性。

### 小结 ###

通过本文的介绍，你对 `each()` 方法应该有了更深入的理解。它是 JQuery 中一个非常有用的工具，能够帮助我们轻松地遍历集合，并在遍历的过程中执行各种操作。不管是数组、对象还是其他类数组对象，`each()` 方法都能胜任。

在实际开发中，灵活运用 `each()` 方法可以使你的代码更加简洁、可读，提高开发效率。希望通过本文的学习，你能更加熟练地运用 `each()` 方法，让你的前端代码更加出色。加油，少年！愿你在遍历的征途上，发现更多的乐趣和技巧。

<table> 
 <tbody> 
  <tr> 
   <td> <strong><font>作者信息</font></strong><br> <br> <font> 作者 ： 繁依Fanyi</font><br> <font>CSDN：</font> <a href="https://blog.csdn.net/qq_21484461?spm=1000.2115.3001.5343" rel="nofollow"><font>https://techfanyi.blog.csdn.net</font></a><br> <font>掘金：</font><a href="https://juejin.cn/user/4154386571867191" rel="nofollow"><font>https://juejin.cn/user/4154386571867191</font></a> </td> 
  </tr> 
 </tbody> 
</table>

[fe098e18bcc24ed2aaff6195ef3f5a1a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/f46956e1939c4b5f876192f8db87585a.png