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

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

描述:

迭代两个图像,并设置它们的 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;
  }
});
});

each(callback) 对于每个匹配的元素所要执行的函数的更多相关文章

  1. jquery简单原则器(匹配偶数元素)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. jquery层级原则器(匹配前一个元素后的所有平辈元素)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. jquery层级原则器(匹配前一个元素后的下一个元素,必须是挨着的)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. jquery层级原则器(匹配父元素下的子元素)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. jquery层级原则器(匹配后代元素div)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. jquery[siblings]取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合

    取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合,用于筛选同辈元素的表达式 $("#pageList").click(function(){ $(this).pa ...

  7. Javascript实例教程:querySelector()方法接受一个CSS查询并返回匹配模式的第一个子孙元素,如果没有匹配的元素则返回null。

    文章简介:querySelector()方法接受一个CSS查询并返回匹配模式的第一个子孙元素,如果没有匹配的元素则返回null. querySelector()方法接受一个CSS查询并返回匹配模式的第 ...

  8. trigger(type,[data]) 在每一个匹配的元素上触发某类事件。

    trigger(type,[data]) 概述 在每一个匹配的元素上触发某类事件.大理石平台价格表 这个函数也会导致浏览器同名的默认行为的执行.比如,如果用trigger()触发一个'submit', ...

  9. add(expr|ele|html|obj[,con]) 把与表达式匹配的元素添加到jQuery对象中。

    add(expr|ele|html|obj[,con]) 概述 把与表达式匹配的元素添加到jQuery对象中.这个函数可以用于连接分别与两个表达式匹配的元素结果集. jQuery 1.4 中, .ad ...

随机推荐

  1. JQuery的动画及其幻灯片效果

    1.显示和隐藏hide()和show() 对于动画来说,显示和隐藏是最基本的效果之一,简单介绍jQuery的显示和隐藏. <script type="text/javascript&q ...

  2. div居中

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. wampserver的php.ini文件

    在修改php.ini文件时,找到了php文件夹下的php.ini文件,但是重启所有服务后就是不起作用.查看前辈的博客后,明白了是在apache目录下的php.ini才是起作用的. .

  4. rman恢复误删除的一张表(不完全恢复)

    恢复误删除的一张表可以使用很多方法,如日志挖掘.闪回等,rman恢复(不完全恢复)肯定不是最好的,也不建议用, 现在我们只是演示一下这种恢复. 1 RMAN备份数据库 2创建测试表 3查看此时的SCN ...

  5. vbox下Oracle Enterprise liunx5.4虚拟机安装10G RAC实验(三)

    接第二篇 http://www.cnblogs.com/myrunning/p/3996183.html 4.安装集群软件 4.1验证安装环境 经过检查发现以下3个包检查未通过: compat-gcc ...

  6. bootstrap input框清空

    <!DOCTYPE HTML> <html> <head> <link href="http://netdna.bootstrapcdn.com/t ...

  7. MySQL Server-id踩到的坑

    最近踩到一个说大不大,说小不小的坑,在此分享出来给各位同学.事情是这样的,线上有2台服务器,1主1从.A -> B,B服务器从A服务器同步数据.每天使用xtrabackup在B服务器上面进行全备 ...

  8. 用vs2013编译lua源码方法(一)

    用vs2013编译lua源码方法 来源:网络    编辑:admin 1.下载lua源码:lua-5.2.3.tar.gz,解压 2.用vs2013建立一个win32工程: 1)下载后解压到一个目录下 ...

  9. jdbc中java与mysql数据类型的映射

    注:这种类型匹配不是强制性标准,特定的JDBC厂商可能会改变这种类型匹配.例如Oracle中的DATE类型是包含时分秒,而java.sql.Date仅仅支持年月日.

  10. 平方和和立方和_hdu2007

    #include <stdio.h>int main(){ int a, b, m , n, t;  while( scanf("%d %d", &a, &am ...