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对

});

代码案例：

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style type="text/css">

		*{margin:0;padding:0;}

		img{ display: block; }

		div{ width: 100px; height: 30px;line-height: 30px; text-align: center; border:1px solid red; margin-bottom: 10px; }

		.example{ border:1px solid red; width: 100px; height: 100px; }

		.btn{ margin-top: 20px; overflow: hidden; display: block; }

	</style>

	<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>

	<script type="text/javascript">

		$(function(){

			//注意:此处 this 指代的是 DOM 对象而非 jQuery 对象。

			// $('img').each(function(i){

			// 	this.src="test"+i+'.jpg';

			// })

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

			// $("img").each(function(){

			//   $(this).toggleClass("example");

			// });
　　　　　　　　　　　　　　//使用 'return' 来提前跳出 each() 循环。

			$("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;

				  }

				});

			});

		});

	</script>

</head>

<body>

<p>each概述</p>

<p>以每一个匹配的元素作为上下文来执行一个函数</p>

<p>意味着，每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）。而且，在每次执行函数时，

都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数（从零开始的整型）。返回'false'将停止循环（就像在普通

的循环中使用'break'）。返回'true'跳至下一个循环（就像在普通的循环中使用'continue'）。</p>

<img />

<img />

<button class="btn">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>

</body>

</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. Linux实战教学笔记40： Mha-Atlas-MySQL高可用方案实践(二)

    六,配置VIP漂移 主机名 IP地址(NAT) 漂移VIP 描述 mysql-db01 eth0:192.168.0.51 VIP:192.168.0.60 系统:CentOS6.5(6.x都可以) ...

  2. c# ftp 判断目录是否存在和创建文件夹

    工作中项目一直使用的ftp上传日志文件出现了问题,新的服务器搭建好后,日志无法上传.正好来学习一下ftp. 程序中的流程是,一个计时器,每分钟检测配置文件中本地日志文件路径下有没有日志文件,如果有就上 ...

  3. socket,TCP/IP的理解（转）

    TCP/IP 要想理解socket首先得熟悉一下TCP/IP协议族, TCP/IP(Transmission Control Protocol/Internet Protocol)即传输控制协议/网间 ...

  4. freemaker 课程

    品优购电商系统开发 第12章 网页静态化解决方案-Freemarker 传智播客.黑马程序员 1.网页静态化技术Freemarker 1.1为什么要使用网页静态化技术 网页静态化解决方案在实际开发中运 ...

  5. 修改字段名change

    ALTER TABLE tc_activity_miaosha_item CHANGE `batch_id` `movie_batch_id` INT () NOT NULL DEFAULT ' CO ...

  6. Mockplus设计大赛获奖选手专访 | Intimate：你的专属密友音乐播放器

    “Intimate中文意思是密友,就是想让这个音乐APP成为最懂用户的一款软件.” 如果,你随身听的音乐APP,可以成为知你懂你的密友,你幸福,她清唱一首<小幸运>:你悲伤,她低声浅吟&l ...

  7. 如何优雅地使用命令行设置windows文件关联

    如何优雅地使用命令行设置windows文件关联 使用ftype查看帮助 设置关联所需命令有ftype assoc,需要管理员权限.如果忘记使用方法可通过ftype的帮助获取查看方法 C:\WINDOW ...

  8. bootstrap实现去点列表、内联列表、水平定义列表

    内联列表:通过添加类名“.list-inline”来实现内联列表,简单点说就是把垂直列表换成水平列表,而且去掉项目符号(编号),保持水平显示. 去点列表:通过给无序列表添加一个类名“.list-uns ...

  9. es学习-基础增删改查

    创建库 插入数据 修改文档: 查询文档: 删除文档:

  10. [GO]panic的应用

    对于异常的处理,error表示的是不太致使的错误,但是如果遇到数组越界或者是空指针这种会导致程序崩溃无法恢复的错误时,就需要使用以panic了 我们不应该使用panic去报error的错误,而是只使用 ...