关于获得当前的index的方法
每日一句English(start from today):
In the previous section we just displayed a list of string entered statically in the Python code.(源于odoo的开发文档)。
翻译:在上一节中我们只显示一个列表的字符串输入静态的Python代码。(百度翻译)
在群里看见有人问了关于,获得当前对象的index值得时候,我做了demo ,获得了当前的index,方法多种,下面我就用我的方法来讲解我的代码:
模拟数据:div里面5个button
<div>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
</div>
下面就是关于取这个index的for循环代码:
<script>
var obj = document.getElementsByTagName("button");
for(var i = 0;i < obj.length;i++) {
(function(i){
obj[i].onclick = function(){
console.log(i);
}
})(i);
}
</script>
对于这个闭包需要讲解一下:可能大多数同学在不理解onclick的时候,就会发现他们获得值就是最后一个值,会写下这么的一串代码
for(var i = 0;i < obj.length;i++) {
obj[i].onclick = function(){
console.log(i+1);
}
}
如图错误:

onclick这个点击函数是异步执行的,也就是说在点击获得值得时候,循环已经结束,到达最后一个值,这时候i的值为5.所以,每次点击的时候,都是获得一样的值。因此,如果想获得里面的i的值的时候就需要将i值包裹起来,就需要用这样的闭包形式,函数自调传入当前的i。每次循环一次,就会让函数自调一次,输出当前的i.索引值是从0开始的,这里加1是想让他输出button的序号。正确所示:

顺便附上关于jq的写法:这里就不用考虑闭包了,都在jq的index这个方法包裹在里,有兴趣的同学可以去找这段jq的源码,来看看这个index的方法是怎么样封装的。
$("button").click(function(){
var index = $("button").index(this);
console.log(index);
})
具体关于闭包的详细解析:我会在在下篇 【闭包的理解】,详细讲解我对于闭包的理解。
谢谢浏览!
关于获得当前的index的方法的更多相关文章
- IndexOf、LastIndexOf、Substring的用法及C# foreach 中获取索引index的方法
String.IndexOf String.IndexOf 方法 (Char, Int32, Int32)报告指定字符在此实例中的第一个匹配项的索引.搜索从指定字符位置开始,并检查指定数量的字符位置 ...
- thinkPHP隐藏url地址栏中的index.php方法
http://localhost/workSpace/First/index.php/Home/Index/index隐藏上面url中的index.php方法如下: 第一步.删除apache配置文件( ...
- MySQL 创建索引(Create Index)的方法和语法结构及例子
MySQL 创建索引(Create Index)的方法和语法结构及例子 MySQL 创建索引(Create Index)的方法和语法结构及例子 CREATE INDEX Syntax CREATE ...
- PHP Notice: Undefined index:解决方法
PHP Notice: Undefined index:解决方法 PHP Notice: Undefined index: 解决方法 <pre> if (empty(swoole_get ...
- C# foreach 中获取索引index的方法
方法一: int i = 0; foreach (var item in arr) { i++; } 方法二: foreach (var item in arr) { int index = arr. ...
- (转)C# foreach 中获取索引index的方法
在C# 开发中往往使用foreach 循环语句 来代替for循环语句.foreach 比 for 更加简洁高效. foreach : foreach ...
- C# foreach 中获取索引index的方法[转]
在C# 开发中往往使用foreach 循环语句 来代替for循环语句.foreach 比 for 更加简洁高效. foreach : foreach ...
- ThinkPHP在Apache和Nginx下去除index.php方法
由于项目需要,用ThinkPHP开发的程序链接要去除index.php下面说下如何解决.一.Nginx方法 由于nginx不支持PATH_INFO,所以需要进入linux终端找到nginx 的配置文件 ...
- IIS7以上版本去掉伪静态去掉index.php方法
1,由于从iis7以上的版本httpd.ini文件已不会被解析,将以下的xml文件复制到web.config 的文件中,然后放到网站的根目录即可. <?xml version="1.0 ...
随机推荐
- JAVA入门[9]-mybatis多表关联查询
概要 本节要实现的是多表关联查询的简单demo.场景是根据id查询某商品分类信息,并展示该分类下的商品列表. 一.Mysql测试数据 新建表Category(商品分类)和Product(商品),并插入 ...
- Ajax顺序执行
循环中的Ajax 在前后端分离的项目中,Ajax是连接前后端的枢纽. 需求:有一个需要循环发起n次的请求,但是n次循环传参不同,我并不知道n是多少,并且要求能够保证返回顺序.JSONP用同步锁无效 示 ...
- url特殊字符转义及解决方法
URL特殊字符需转义 1.空格换成加号(+) 2.正斜杠(/)分隔目录和子目录 3.问号(?)分隔URL和查询 4.百分号(%)制定特殊字符 5.#号指定书签 6.&号分隔参数 转义字符的原因 ...
- angular封装七牛云图片上传,解决同一页面多个上传按钮分别上传
step1:引入文件 引入Plupload *该SDK上传功能集于Plupload插件封装,所以需要下载Plupload; plupload.dev.js 引入qiniu.js为了简便,当时直接从官网 ...
- 《高性能MySQL(第3版)》【PDF】下载
内容简介 <高性能mysql(第3版)>是mysql 领域的经典之作,拥有广泛的影响力.第3版更新了大量的内容,不但涵盖了最新mysql5.5版本的新特性,也讲述了关于固态盘.高可扩展性设 ...
- SoapUI模拟soap接口返回不同响应(通过groovy脚本)
一.创建soap项目,输入wsdl文件,然后生成SOAP Mock Service,再生成测试用例,然后新建新的响应 WSDL文件:MathUtil.wsdl <?xml version=&qu ...
- KVO的内部实现以及使用
转载自:http://www.cocoachina.com/applenews/devnews/2014/0107/7667.html KVO是实现Cocoa Bindings的基础,它提供了一种 ...
- vs发布项目webconfig替换语法
关于vs发布项目时webconfig替换语法也是最近才学到的东西,写这篇文章就当是作个备忘录吧,如果能帮助别人能够学习到webconfig如何替换那就再好不过了. 1.认识一下web项目下的web.D ...
- Linux第三节整理 、增删改查、用户管理
帮助+基本文件管理+用户管理 1.怎么查看命令帮助 ls --help man ls :查看命令/man 5 file:查看配置文件 2.基本文件管理,通过{查,建,删,改} 四个维度介绍了不同的命令 ...
- 在亚马逊linux环境上装mysql+添加启动项
安装mysql sudo yum install mysql sudo yum install mysql-server sudo yum install mysql-devel 添加到系统启动项su ...