Jquery中each
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的更多相关文章
- [转载]Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
本文对Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法进行了详细的总结,需要的朋友可以参考下,希望对大家有所帮助. 详细解读Jquery各Ajax函数: ...
- JQuery中的工具函数总结
前提引入 前提当然也是要引入Jquery啦... <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" typ ...
- JQuery中ajax的相关方法总结
前提条件 话说是jquery中的ajax方法,那么前提条件当然是引入jquery啦. <script src="http://libs.baidu.com/jquery/1.9.0/j ...
- JavaScript jQuery 中定义数组与操作及jquery数组操作
首先给大家介绍javascript jquery中定义数组与操作的相关知识,具体内容如下所示: 1.认识数组 数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象Javascript不支持多 ...
- jQuery中的100个技巧
1.当document文档就绪时执行JavaScript代码. 我们为什么使用jQuery库呢?原因之一就在于我们可以使jQuery代码在各种不同的浏览器和存在bug的浏览器上完美运行. < ...
- jquery中ajax用return来返回值无效
jquery中,ajax返回值,有三种写法,只有其中一种是成功的 /** * async:false,同步调用 * 返回1:2 * 失败 * 分析:ajax内部是一个或多个定义的函数,ajax中ret ...
- JQuery中$.each 和$(selector).each()的区别详解
PS:晚上在写页面时,发现了一个问题,$.each 和$(selector).each()有哪些区别?百度搜索关键词,首页显示出来一些前人的经验,总结一下,发上来. 1.$(selector).eac ...
- jQuery中Animate进阶用法(一)
jQuery中animate的用法你了解多少呢?如果仅仅是简单的移动位置,显示隐藏,哦!天哪你在浪费资源!因为animate太强大了,你可以有很多意想不到的用法!让我们一起研究一下吧~~ 首先要了解j ...
- jquery 中jsonp的实现原理
在同源策略下,在某个服务器下的页面是无法获取到该服务器以外的数据的,即一般的 ajax是不能进行跨域请求的.但 img.iframe .script等标签是个例外,这些标签可以通过 src属性请求到其 ...
- 解决上一篇jquery中on的疑惑
内容都是来自:http://www.365mini.com/page/jquery-on.htm.这里做一下收藏.文章的最后 疑问和解答可以解决所有的疑惑 看了之后能更好的整篇文章. on()函数 ...
随机推荐
- Python下载与安装
Python目前已支持所有主流操作系统,在Linux,Unix,Mac系统上自带Python环境,一般默认装的是Python2版本,Windows系统上没有Pyhton环境,需要我们手动安装一下,过程 ...
- kubernetes ServiceAccount
api server 启动参数增加 –admission_control=…,ServiceAccount,…
- js对象的几种创建方式和js实现继承的方式[转]
一.js对象的创建方式 1. 使用Object构造函数来创建一个对象,下面代码创建了一个person对象,并用两种方式打印出了Name的属性值. var person = new Object(); ...
- 混合开发之DSBridge(同时支持Android和iOS)
什么是 Javascript bridge 随着h5的不断普及及优化,以及移动端对动态化的需求越来越大,开发者经常需要在app中嵌入一些网页,然后会在web和native之间进行交互,如传递数据,调用 ...
- Java中的对象要怎样才算相等
一.引用相等性与对象相等性 1. 引用相等性 引用到堆上同一个对象的两个引用是相等的,这就是引用的相等性. 如果想要知道两个引用是否相等,可以使用==来比较变量上的字节组合,如果引用到相同的对象,字节 ...
- not1,not2,bind1st和bind2nd详解
1.引言 bind1st和bind2nd函数用于将一个二元函数对象(binary functor,bf)转换成一元函数对象(unary functor,uf).为了达到这个目的,它们需要两个参数:要转 ...
- code1214 线段覆盖
贪心 把线段们按终止点b的先后排序,b小的在前面,b一样随便 然后设r为当前最大的b 每加入一条新的线段i,判断是否重合(i.a>=r) 如果重合就舍弃i,否则把i加入,ans++,更新r:r= ...
- [Fiddler]如何让Fiddler可以抓取https的请求
Fiddler通过在本机开启了一个http的代理服务器来进行http请求和响应转发,默认情况下,并不能抓取https的请求.下面小编就来介绍下,如何用fiddler来抓取https的请求. 1.打开F ...
- vscode安装dlv插件报错:There is no tracking information for the current branch.
vscode安装dlv插件报错:There is no tracking information for the current branch. https://blog.csdn.net/a7859 ...
- 1.单机部署hadoop测试环境
之前看了很多理论上的知识,感觉云里雾里的,所以赶紧着手搭建个单机版的hadoop跑一跑,开启自学大数据技术的第一步~~ 1.在开源的世界里,我就是个土豪,要啥有啥,所以首先你得有个jdk,有钱所以用最 ...