在前端开发中，经常需要处理和展示 JSON 数据。而当数据需要遍历时，each() 是一个非常有用的方法。在 jQuery 中，我们可以使用 each() 方法来迭代 JSON 对象，并访问每个对象的属性。
什么是 JSON？
JSON 全称 JavaScript Object Notation，是一种轻量级的数据交换格式。它采用类似于 JavaScript 对象的结构，在数据传输时不同语言之间易于解析和生成。因此，在 Web 开发中，JSON 受到广泛应用。
JSON 对象由花括号 {} 包围，属性和值之间由冒号 : 分隔，属性之间用逗号 , 分隔。以下是一个简单的 JSON 对象：
{
"name": "John",
"age": 30,
"city": "New York"
}each() 方法的用法
在 jQuery 中，each() 方法用于迭代元素集合，并对每个元素执行指定的函数。它的基本语法如下：
$.each(collection, callback(indexInArray, valueOfElement))
其中，collection 参数是要遍历的数组或对象，callback 函数则是在每个元素上执行的回调函数。该函数接受两个参数：当前元素在对象中的索引和元素的值。
例如，以下代码将遍历一个包含三个数字的数组，并将每个元素乘以 2：
var numbers = [1, 2, 3];
$.each(numbers, function(index, value) {
numbers[index] = value * 2;
});
console.log(numbers); // [2, 4, 6]在 jQuery 中使用 each() 处理 JSON 数据
接下来，让我们看一个更有趣的例子。假设我们有一个包含用户信息的 JSON 对象，如下所示：
-- -------------------- ---- -------
-
-
------- -------
------ ---
------- ---- -----
--
-
------- -------
------ ---
------- ---- ----------
--
-
------- ------
------ ---
------- ---------
-
-我们想要遍历该对象，并将其中的每个用户信息显示在网页上。为此，我们可以编写以下代码：
-- -------------------- ---- -------
--------- -----
------
------
------------ ------ -- ------- ---- ---- -- --------------
------- -----------------------------------------------------------
-------
------
-------- -----------------
--- ----------------
--------
--- ----- - -
-
------- -------
------ ---
------- ---- -----
--
-
------- -------
------ ---
------- ---- ----------
--
-
------- ------
------ ---
------- ---------
-
--
------------- --------------- ----- -
--- -- - ---------------
----------------- - -- - - -------- - -- - - -----------
-----------------------
---
---------
-------
-------在上面的示例中，我们遍历了 users 对象，并使用 jQuery 的 append() 方法将每个用户名、年龄和城市显示为一个列表项。运行该代码后，将会显示以下内容：
User information: - John, 30, New York - Jane, 25, San Francisco - Bob, 40, Chicago
总结
在本文中，我们学习了如何在 jQuery 中使用 each() 方法处理 JSON 数据。通过编写示例代码，我们演示了如何遍历 JSON 对象，并访问每个对象的属性。希望这篇文章能够帮助你
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/2787