1、选择器+遍历

$('div').each(function (i){

i就是索引值

this 表示获取遍历每一个dom对象

});

2、选择器+遍历

$('div').each(function (index,domEle){

index就是索引值

domEle 表示获取遍历每一个dom对象

});

3、更适用的遍历方法

1）先获取某个集合对象

2）遍历集合对象的每一个元素

var d=$("div");

$.each(d,function (index,domEle){

d是要遍历的集合

index就是索引值

domEle 表示获取遍历每一个dom对

});

代码案例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>Document</title>
  6. 	<style type="text/css">
  7. 		*{margin:0;padding:0;}
  8. 		img{ display: block; }
  9. 		div{ width: 100px; height: 30px;line-height: 30px; text-align: center; border:1px solid red; margin-bottom: 10px; }
  10. 		.example{ border:1px solid red; width: 100px; height: 100px; }
  11. 		.btn{ margin-top: 20px; overflow: hidden; display: block; }
  12. 	</style>
  13. 	<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
  14. 	<script type="text/javascript">
  15. 		$(function(){
  16. 			//注意:此处 this 指代的是 DOM 对象而非 jQuery 对象。
  17. 			// $('img').each(function(i){
  18. 			// 	this.src="test"+i+'.jpg';
  19. 			// })
  20. 			//如果你想得到 jQuery对象，可以使用 $(this) 函数。
  21. 			// $("img").each(function(){
  22. 			//   $(this).toggleClass("example");
  23. 			// });
    　　　　　　　　　　　　　　//使用 'return' 来提前跳出 each() 循环。
  24. 			$("button").click(function () {
  25. 				$("div").each(function (index, domEle) {
  26. 				  // domEle == this
  27. 				  $(domEle).css("backgroundColor", "yellow");
  28. 				  if ($(this).is("#stop")) {
  29. 				  $("span").text("Stopped at div index #" + index);
  30. 				  return false;
  31. 				  }
  32. 				});
  33. 			});
  34. 		});
  35. 	</script>
  36.  
  37. </head>
  38. <body>
  39. <p>each概述</p>
  40. <p>以每一个匹配的元素作为上下文来执行一个函数</p>
  41. <p>意味着，每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）。而且，在每次执行函数时，
  42. 都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数（从零开始的整型）。返回'false'将停止循环（就像在普通
  43. 的循环中使用'break'）。返回'true'跳至下一个循环（就像在普通的循环中使用'continue'）。</p>
  44. <img />
  45. <img />
  46.  
  47. <button class="btn">Change colors</button>
  48. <span></span>
  49. <div></div>
  50. <div></div>
  51.  
  52. <div></div>
  53. <div></div>
  54. <div id="stop">Stop here</div>
  55. <div></div>
  56.  
  57. <div></div>
  58. <div></div>
  59. </body>
  60. </html>

　　

Jquery中each的更多相关文章

  1. [转载]Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

    本文对Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法进行了详细的总结,需要的朋友可以参考下,希望对大家有所帮助. 详细解读Jquery各Ajax函数: ...

  2. JQuery中的工具函数总结

    前提引入 前提当然也是要引入Jquery啦... <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" typ ...

  3. JQuery中ajax的相关方法总结

    前提条件 话说是jquery中的ajax方法,那么前提条件当然是引入jquery啦. <script src="http://libs.baidu.com/jquery/1.9.0/j ...

  4. JavaScript jQuery 中定义数组与操作及jquery数组操作

    首先给大家介绍javascript jquery中定义数组与操作的相关知识,具体内容如下所示: 1.认识数组 数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象Javascript不支持多 ...

  5. jQuery中的100个技巧

      1.当document文档就绪时执行JavaScript代码. 我们为什么使用jQuery库呢?原因之一就在于我们可以使jQuery代码在各种不同的浏览器和存在bug的浏览器上完美运行. < ...

  6. jquery中ajax用return来返回值无效

    jquery中,ajax返回值,有三种写法,只有其中一种是成功的 /** * async:false,同步调用 * 返回1:2 * 失败 * 分析:ajax内部是一个或多个定义的函数,ajax中ret ...

  7. JQuery中$.each 和$(selector).each()的区别详解

    PS:晚上在写页面时,发现了一个问题,$.each 和$(selector).each()有哪些区别?百度搜索关键词,首页显示出来一些前人的经验,总结一下,发上来. 1.$(selector).eac ...

  8. jQuery中Animate进阶用法（一）

    jQuery中animate的用法你了解多少呢?如果仅仅是简单的移动位置,显示隐藏,哦!天哪你在浪费资源!因为animate太强大了,你可以有很多意想不到的用法!让我们一起研究一下吧~~ 首先要了解j ...

  9. jquery 中jsonp的实现原理

    在同源策略下,在某个服务器下的页面是无法获取到该服务器以外的数据的,即一般的 ajax是不能进行跨域请求的.但 img.iframe .script等标签是个例外,这些标签可以通过 src属性请求到其 ...

  10. 解决上一篇jquery中on的疑惑

    内容都是来自:http://www.365mini.com/page/jquery-on.htm.这里做一下收藏.文章的最后  疑问和解答可以解决所有的疑惑  看了之后能更好的整篇文章. on()函数 ...

随机推荐

  1. Python面向对象相关知识1

    1. python是动态的语言,这样在使用类的时候,类的属性就可以随意的添加,但是这样在实际开发中有一定的缺陷,所以,可以在类中定义一个特殊的__init__()方法,当创建实例时,__init__( ...

  2. Java中的class为什么要设置访问控制？和C++比较的感悟

    Java中的class为什么要设置访问控制?和C++比较的感悟 在Java中package解决了class的名字空间问题,class的成员都有各自的访问控制符,而class还有两种访问控制符,分别是p ...

  3. cdh 安装步骤

    http://www.cnblogs.com/jasondan/p/4011153.html 关于CDH和Cloudera Manager CDH (Cloudera's Distribution, ...

  4. node-mysql中防止SQL注入

    备注: 本文针对mysqljs/mysql. 为了防止SQL注入,可以将SQL中传入参数进行编码,而不是直接进行字符串拼接.在node-mysql中,防止SQL注入的常用方法有以下四种: 方法一:使用 ...

  5. Reactjs+BootStrap开发自制编程语言Monkey的编译器:创建简易的页面IDE

    http://localhost:3000/

  6. mysql oracle计算两点之间的距离

    mysql函数: SET FOREIGN_KEY_CHECKS=0; DROP FUNCTION IF EXISTS `getDistance`;DELIMITER ;;CREATE DEFINER= ...

  7. eclipse插件jd-eclipse的使用

    https://blog.csdn.net/u013215289/article/details/51275527

  8. leetcode BFS解题思路

    Word Ladder 思路一:单向bfs, 使用visited数组记录哪些已经访问过了, 访问过的就不允许再次入队, 同时这里想到的是使用26个英文字母,枚举可能的取值, 类似brute force ...

  9. Linux下Maven的安装与使用

    pache Maven,是一个软件(特别是Java软件)项目管理及自动构建工具,由Apache软件基金会所提供.基于项目对象模型(POM)概念,Maven利 用一个中央信息片断能管理一个项目的构建.报 ...

  10. Android代码速查，写给新手的朋友们[转]

    原文地址:http://www.open-open.com/lib/view/open1397286499090.html 0 android 创建按钮 Button button = new But ...