在 jQuery 的遍历方法中，each() 无疑是使用频率较高的方法之一。它的作用简单而强大：为匹配元素中的每一个元素，依次执行一个回调函数。当你需要对一组元素逐个进行操作——比如读取每个列表项的文本、修改每个表格行的样式，或者根据条件筛选处理——each() 就是你的得力工具。
each() 方法接受一个回调函数作为参数，这个回调函数又接收两个可选的参数：index 和 element。index 表示当前元素在中的索引位置（从 0 开始计数），element 则是当前正在处理的 DOM 元素。在回调函数内部，this 关键字同样指向当前元素，这给了你多种方式来引用正在迭代的对象。
为什么我会选择 each() 而不是普通的 for 循环？
很多刚接触 jQuery 的开发者会问：既然 JavaScript 本身有 for 循环，为什么还要用 each()？我的体会是，each() 与 jQuery 对象无缝集成，你可以在回调函数里直接用 $(this) 继续调用其他 jQuery 方法，形成流畅的方法链。each() 的作用域隔离更清晰，不容易出现索引变量污染的问题。当你在一个循环中还要嵌套另一个循环时，each() 的闭包特性会让你少踩不少坑。
值得一提的是，在回调函数中 return false 可以提前终止整个循环。这和普通 for 循环中的 break 效果一致。如果只是跳过当前迭代而不终止循环，则使用 return true，功能等价于 continue。
语法与参数
$(selector).each(function(index, element) {
// 在此执行针对每个元素的操作
});
参数说明：
-
function(index, element)：必需参数。这是一个回调函数，会为匹配中的每一个元素执行一次。-
index：整数，当前元素在中的索引位置，从 0 开始。 -
element：当前迭代到的 DOM 元素对象。在函数内部也可以使用this来指代同一个元素。
-
课程知识要点
-
遍历覆盖面：
each()会对 jQuery 对象中所有匹配元素逐一执行回调，不会遗漏。 -
索引从 0 开始：务必记住
index参数从 0 起算，这在处理位置相关逻辑时很重要。 -
提前退出机制：回调函数中
return false会立即停止后续迭代，相当于原生循环的break。 -
跳过当次迭代：
return true会跳过当前元素，继续下一个元素的回调，功能等同于continue。 -
this 的多面性：回调内的
this指向当前 DOM 元素，若想使用 jQuery 方法，需要用$(this)包装。
示例一：基础遍历并弹出元素内容
这个例子演示了 each() 最基本的用法——遍历所有 li 元素，并弹出每个元素的文本内容。注意这里没有使用 index 和 element 参数，而是通过 $(this) 来操作当前元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>each() 基础遍历 · 编程学习</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h2>编程语言列表</h2>
<ul>
<li>JavaScript</li>
<li>Python</li>
<li>Java</li>
<li>Go</li>
</ul>
<p>点击按钮查看每一项的内容：</p>
<button onclick="showEachItem()">逐个显示</button>
<script>
function showEachItem() {
$(document).ready(function () {
$("li").each(function () {
alert("当前项内容: " + $(this).text());
});
});
}
</script>
</body>
</html>
点击按钮后，页面会依次弹出四个告警框，分别显示每个 li 元素的文本。这个简单流程体现了 each() 的核心工作方式：依次选中、依次执行。
示例二：使用索引并提前终止循环
第二个示例展示了 index 和 element 参数的用法，以及如何通过 return false 提前停止迭代。在开发中，这种模式常用于在一组元素里找到符合条件的那个，然后停止后续处理以节省计算资源。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>each() 带索引与提前终止 · 编程学习</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
body {
text-align: center;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
width: 45px;
height: 45px;
margin: 6px;
line-height: 45px;
font-size: 20px;
border: 2px solid #1a73e8;
cursor: default;
}
button {
font-size: 20px;
margin-top: 15px;
}
</style>
</head>
<body>
<h2>循环遍历并中途停止</h2>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li id="stop-here">停</li>
<li>5</li>
<li>6</li>
</ul>
<button onclick="iterateWithStop()">执行遍历</button>
<p></p>
<script>
function iterateWithStop() {
$(document).ready(function () {
$("li").each(function (index, element) {
// 给当前元素设置背景色
$(element).css("background", "#e8f5e9");
// 当遇到 id 为 stop-here 的元素时停止遍历
if ($(this).is("#stop-here")) {
$("p").text("遍历已终止。当前索引位置: " + index)
.css("fontSize", "18px");
return false; // 提前退出循环
}
});
});
}
</script>
</body>
</html>
执行这段代码，你会看到只有前四个方块变为浅绿色背景，后面的 5 和 6 保持不变。页面下方会显示终止时的索引位置。注意，虽然 "停" 是视觉上的第 4 个元素，但因为索引从 0 开始，它的索引值是 3。
个人经验与实用建议
在开发中，我通常在两种场景下优先使用 each()：一是需要对中每个元素进行异步操作以外的同步处理；二是需要读取或修改每个元素的独有状态时。如果只是批量添加相同样式，直接用 jQuery 的隐式迭代会更简洁，不需要显式调用 each()。
each() 配合 return false 做提前退出是个很实用的技巧。比如在一组表格行中查找特定数据，找到后立刻停止，能避免不必要的遍历。但要注意，如果回调函数里涉及网络请求或定时器等异步操作，return false 并不能阻止异步任务的执行，这种情况下需要额外的状态标记来控制。
