关于获得当前的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 ...
随机推荐
- weka 通过普通文本转化成arff文件
这个问题来源于我要用weka这个数据挖掘工具,测试时发现我们新建txt文件,输入内容,然后直接改后缀. 这样生成的arff文件不能打开. 究其原因是编码的问题,正确处理方法如下: 新建文本,然后用no ...
- MyBatis简单使用
MyBatis MyBatis 是一款优秀的持久层框架,它支持定制化 SQL.存储过程以及高级映射.MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集.MyBatis 可以使 ...
- javascript中的双向绑定
阅读目录 一:发布订阅模式实现数据双向绑定 二:使用Object.defineProperty 来实现简单的双向绑定. 前言: 双向数据绑定的含义:可以将对象的属性绑定到UI,具体的说,我们有一个对象 ...
- JMeter接口返回数组键值对校验方法
$.data.tourRecommend[?(@.title=="产品特色")].type
- JavaScript基础3——关于运算符
算数运算符 算数运算符有+.-.*./.%.++.--.=.类似+=的运算符,其使用方式与编程语言(Java.C++.C#等)基本一样.给定 y=5,下面的表格解释了这些算术运算符: 运算符 描述 例 ...
- 二叉树Bynary_Tree(2):二叉树的递归遍历
7/18/2017 正在码,理解完就写博 7/21/2017 终于码完,借助链表实现的队列撸一个二叉树对于我来说有难度,撸了两天没有成果,我最后选用的是数组实现的循环队列去撸一个二叉树 正文如下: 以 ...
- JAVA Socket编程(二)之TCP通信
基于TCP(面向连接)的socket编程,分为客户端和服务器端. 客户端的流程如下: (1)创建套接字(socket) (2)向服务器发出连接请求(connect) (3)和服务器端进行通信(send ...
- 命令行执行php脚本 中$argv和$argc
在实际工作中有可能会碰到需要在nginx命令行执行php脚本的时候,当然你可以去配置一个conf用外网访问. 在nginx命令行中 使用 php index.php 就可以执行这个index.php脚 ...
- ubuntu16.04 查询ip,网关,dns信息
用ifconfig命令只能查询ip,子网掩码信息,不能获取dns和网关信息 用下面命令即可查询 nmcli dev show
- bzoj 2750: [HAOI2012]Road
Description C国有n座城市,城市之间通过m条单向道路连接.一条路径被称为最短路,当且仅当不存在从它的起点到终点的另外一条路径总长度比它小.两条最短路不同,当且仅当它们包含的道路序列不同.我 ...