关于获得当前的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 ...
随机推荐
- 使用Logstash来实时同步MySQL数据到ES
上篇讲到了ES和Head插件的环境搭建和配置,也简单模拟了数据作测试 本篇我们来实战从MYSQL里直接同步数据 一.首先下载和你的ES对应的logstash版本,本篇我们使用的都是6.1.1 下载后使 ...
- 微信小程序的Web API接口设计及常见接口实现
微信小程序给我们提供了一个很好的开发平台,可以用于展现各种数据和实现丰富的功能,通过小程序的请求Web API 平台获取JSON数据后,可以在小程序界面上进行数据的动态展示.在数据的关键 一环中,我们 ...
- 自学Python5.2-类、模块、包
类.模块.包 一.类 类的概念在许多语言中出现,很容易理解.它将数据和操作进行封装,以便将来的复用. 二.模块module 通常模块为一个文件,直接使用import来导入就好了.可以作为module ...
- java 网络编程学习笔记
1.IP地址 IP地址组成:网络号段+主机号段 IP地址分类: A类:第一号段为网络号段+后三段的主机号段 1.0.0.1---127.255.255.254(10.x.x.x是私有地址) 一个网络号 ...
- mkpasswd 随机密码生成
root@op-admin:~# mkpasswd -l -n usage: mkpasswd [args] [user] where arguments are: -l # (length of p ...
- C++11新语法糖之尾置返回类型
C++11的尾置返回类型初衷是为了方便复杂函数的声明和定义,但是当复杂度稍微提升一些的时候很明显能注意到这种设计的作用微乎其微. 首先考虑如下代码: C++ //返回指向数组的指针 auto func ...
- Button的五种点击事件
1.内部类方式 class MyOnClickListener implements View.OnClickListener{ /** * Called when a view has been c ...
- Mac下nvm管理node.js版本问题
本篇文章主要是针对已经安装了node.js和nvm管理工具小伙伴遇到的问题. 管理工具有两个,一个是nvm,还有一个是nnvm的好处就是可以管理多个node版本,而且可以切换想要的版本,可以安装一个稳 ...
- vue 回到顶部的小问题
今天在用vue项目中,实现回到顶部功能的时候,我写了一个backTop组件,接下来需要通过监听window.scroll事件来控制这个组件显示隐藏 因为可能会有其他的组件会用到这样的逻辑,所以将此功能 ...
- JAVA NIO学习二:通道(Channel)与缓冲区(Buffer)
今天是2018年的第三天,真是时光飞逝,2017年的学习计划还没有学习完成,因此继续开始研究学习,那么上一节我们了解了NIO,那么这一节我们进一步来学习NIO相关的知识.那就是通道和缓冲区.Java ...