在前端的世界里，操作元素是我们开发者最为频繁的任务之一。为了更好地操控页面上的元素，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>
在这个例子中，我们定义了一个包含图片路径的数组 imagePaths，然后使用 each() 方法遍历了这个数组。在遍历的过程中，我们通过拼接字符串构建了每个图片元素的 ID，然后使用 attr() 方法修改了图片元素的 src 属性。
小结
通过本文的介绍，你对 each() 方法应该有了更深入的理解。它是 JQuery 中一个非常有用的工具，能够帮助我们轻松地遍历集合，并在遍历的过程中执行各种操作。不管是数组、对象还是其他类数组对象，each() 方法都能胜任。
在实际开发中，灵活运用 each() 方法可以使你的代码更加简洁、可读，提高开发效率。希望通过本文的学习，你能更加熟练地运用 each() 方法，让你的前端代码更加出色。加油，少年！愿你在遍历的征途上，发现更多的乐趣和技巧。
| 作者信息 作者 ： 繁依Fanyi CSDN： https://techfanyi.blog.csdn.net 掘金：https://juejin.cn/user/4154386571867191 |
