.each（）

类别：其他>集合操作|横向移动

.each（函数）退货：jQuery（jQuery）

描述：遍历jQuery对象，为每个匹配的元素执行一个函数。

这个.each（）该方法旨在使DOM循环结构简洁且不易出错。调用时，它会迭代作为jQuery对象一部分的DOM元素。每次运行回调时，都会从0开始传递当前循环迭代。更重要的是，回调是在当前DOM元素的上下文中激发的，因此关键字这引用元素。

假设页面上有一个简单的无序列表：

1
2
三
4
 
<ul公司>
  <锂>foo公司</锂>
  <锂>酒吧</锂>
</ul公司>

您可以选择列表项并遍历它们：

1
2
三
 
$(“李”).每个(功能(指数){
  慰问.log（索引+": "+ $(这).text（））；
});

因此，将为列表中的每个项目记录一条消息：

0:foo
1:巴

您可以通过返回假.

注意：大多数返回jQuery对象的jQuery方法也会循环通过jQuery集合中的元素集，这个过程称为隐式迭代。发生这种情况时，通常没有必要明确地使用迭代.each（）方法：

1
2
三
4
5
6
7
 
//此处不需要.each（）方法：
$(“李”).每个(功能(){
$(这).addClass（添加类）(“foo”);
});
 
//相反，您应该依赖隐式迭代：
$(“李”).addClass（添加类）(“酒吧”);

示例：

迭代三个div并设置其颜色属性。

1
2
三
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
<!文档类型html格式>
<html格式 朗=“en”（英语）>
<头>
  <元 字符集=“utf-8”>
  <标题>每个演示</标题>
  <风格>
  div公司{
    颜色：红色；
    水平对齐：中心；
    光标：指针；
    字体加粗：加粗；
    宽度:300像素;
}
  </风格>
  <脚本 型钢混凝土="https://code.jquery.com/jquery-3.7.0.js"></脚本>
</头>
<身体>
 
<div公司>单击此处</div公司>
<div公司>迭代</div公司>
<div公司>这些div。</div公司>
 
<脚本>
$(文件.body）.打开(“单击”,功能(){
$(“div”（div）).每个(功能(我){
    如果(这.样式.颜色==“蓝色”) {
      这.样式.颜色=“蓝色”;
}其他的{
      这.样式.颜色="";
}
} );
} );
</脚本>
 
</身体>
</html格式>

演示：

要访问jQuery对象而不是常规DOM元素，请使用$（本）。例如：

1
2
三
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
<!文档类型html格式>
<html格式 朗=“en”（英语）>
<头>
  <元 字符集=“utf-8”>
  <标题>每个演示</标题>
  <风格>
  ul公司{
    字体大小:18像素;
    边缘:0;
}
  跨度{
    颜色：蓝色；
    文本删除：下划线；
    光标：指针；
}
  .示例{
    字体风格：斜体；
}
  </风格>
  <脚本 型钢混凝土="https://code.jquery.com/jquery-3.7.0.js"></脚本>
</头>
<身体>
 
待办事项列表：<跨度>（单击此处更改）</跨度>
<ul公司>
  <锂>吃</锂>
  <锂>睡眠</锂>
  <锂>要快乐</锂>
</ul公司>
 
<脚本>
$(“span”)上的(“单击”,功能(){
$(“李”).每个(功能(){
$(这).toggleClass（.toggle类）(“示例”);
});
});
</脚本>
 
</身体>
</html格式>

演示：

使用返回false提前中断每个（）循环。

1
2
三
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
 
<!文档类型html格式>
<html格式 朗=“en”（英语）>
<头>
  <元 字符集=“utf-8”>
  <标题>每个演示</标题>
  <风格>
  div公司{
    宽度:40像素;
    高度:40像素;
    边缘:5像素;
    浮动：左；
    边境:2像素蓝色固体；
    水平对齐：中心；
}
  跨度{
    颜色：红色；
}
  </风格>
  <脚本 型钢混凝土="https://code.jquery.com/jquery-3.7.0.js"></脚本>
</头>
<身体>
 
<按钮>更改颜色</按钮>
<跨度></跨度>
<div公司></div公司>
<div公司></div公司>
<div公司></div公司>
<div公司></div公司>
<div公司 身份证件=“停止”>停在这里</div公司>
<div公司></div公司>
<div公司></div公司>
<div公司></div公司>
 
<脚本>
$(“按钮”)上的(“单击”,功能(){
$(“div”（div）).每个(功能(索引，元素){
    //元素==此
$（元素）.css(“背景颜色”,“黄色”);
    如果( $(这).是(“#停止”) ) {
$(“span”).text格式(“在div索引#处停止”+指数）；
      返回 假;
}
});
});
</脚本>
 
</身体>
</html格式>

演示：