each(callback)

原创于 2021-11-27 16:44:02 发布 · 112 阅读

CC 4.0 BY-SA版权

文章标签：

这篇博客介绍了jQuery的.each()方法，它允许开发者针对每个匹配的DOM元素执行一个函数。在函数内部，this关键字指向当前元素，同时提供了一个索引来标识元素在集合中的位置。示例展示了如何改变图片的src属性，如何在循环中切换类名，以及如何根据条件提前退出循环。此外，还解释了如何在循环中通过return false和return true来控制流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

概述

以每一个匹配的元素作为上下文来执行一个函数。

意味着，每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）。而且，在每次执行函数时，都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数（从零开始的整型）。返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。

参数

callback Function V 1.0

对于每个匹配的元素所要执行的函数

示例

描述:

迭代两个图像，并设置它们的 src 属性。注意:此处 this 指代的是 DOM 对象而非 jQuery 对象。

HTML 代码:

<img/><img/>

jQuery 代码:

$("img").each(function(i){
   this.src = "test" + i + ".jpg";
 });

结果:

[ <img src="test0.jpg" />, <img src="test1.jpg" /> ]

描述:

如果你想得到 jQuery对象，可以使用 $(this) 函数。

HTML 代码:

<button>Change colors</button>
<span></span> 
<div></div> 
<div></div>
<div></div>
<div></div>
<div id="stop">Stop here</div> 
<div></div>
<div></div>
<div></div>

jQuery 代码:

$("img").each(function(){
  $(this).toggleClass("example");
});

描述:

你可以使用 'return' 来提前跳出 each() 循环。

HTML 代码:

<button>Change colors</button>
<span></span> 
<div></div> 
<div></div>
<div></div>
<div></div>
<div id="stop">Stop here</div> 
<div></div>
<div></div>
<div></div>

jQuery 代码:

$("button").click(function () {
$("div").each(function (index, domEle) { 
  // domEle == this 
  $(domEle).css("backgroundColor", "yellow");  
  if ($(this).is("#stop")) { 
  $("span").text("Stopped at div index #" + index); 
  return false; 
  } 
});
});