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. Coursera连接不上（视频无法播放），修改hosts文件

    视频问题 如果Coursera网站连接不上,或者视频加载不出来.可以通过如下方式进行配置:   一.找到hosts文件 Windows 系统, hosts文件位于: [C:\Windows\Syste ...

  2. Linux实战教学笔记52：GlusterFS分布式存储系统

    一,分布式文件系统理论基础 1.1 分布式文件系统出现 计算机通过文件系统管理,存储数据,而现在数据信息爆炸的时代中人们可以获取的数据成指数倍的增长,单纯通过增加硬盘个数来扩展计算机文件系统的存储容量 ...

  3. 10 华电内部文档搜索系统 search01

    Lucene解决搜索问题.ibatis实现存放问题,就是解决持久化问题.Struts 2做页面显示,就是实现业务层对应的功能. Spring与ibatis结合, 添加Spring支持 右击项目名s2i ...

  4. eclipse+hbase开发环境部署

    一.前言 1. 前提 因为hbase的运行模式是伪分布式,需要用到hdfs,所以在此之前,我已经完成了hadoop-eclipse的开发环境搭建,详细看另一篇文章:hadoop开发环境部署——通过ec ...

  5. 导入txt文件到SQL SERVER 2008

    最近在学习数据库,想要试处理大量数据.大量的数据手动输入是不可能的了,所以需要导入.本人上网看了不少的教程,然后下载了txt格式的一万条彩票开奖记录数据.但是把这些数据导入到SQL Server 20 ...

  6. CentOS安装配置Tomcat-7

    安装环境:CentOS-6.5安装方式:源码安装软件:apache-tomcat-7.0.29.tar.gz下载地址:http://tomcat.apache.org/download-70.cgi ...

  7. 数字图像处理实验（总计23个）汇总 标签： 图像处理MATLAB 2017-05-31 10:30 175人阅读 评论(0)

    以下这些实验中的代码全部是我自己编写调试通过的,到此,最后进行一下汇总. 数字图像处理实验(1):PROJECT 02-01, Image Printing Program Based on Half ...

  8. Oracle 用户

    1.关于创建用户; 2.用户配置文件; 3.创建用户; 4.更改用户; 5.删除用户; 1.关于创建用户: 1.1 用户名:创建数据库用户必须具有 Create user 系统权限,必须指定用户名和密 ...

  9. Photo3

    Story: 这是一个简朴的家,有用旧了的风扇,木制的桌子,桌子上放了未完成的功课,还有一只正在睡觉的猫.阳光从窗户照进来,微风轻轻的吹着.想象你是坐在窗边吹风的小女孩,你的眼睛正眺望着不远处的风景, ...

  10. servletConfig的应用

    在Servlet的配置文件中,可以使用一个或多个<init-param>标签为servlet配置一些初始化参数. 当servlet配置了初始化参数后,web容器在创建servlet实例对象 ...