关于获得当前的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 ...
随机推荐
- C#设计模式之二十一职责链模式(Chain of Responsibility Pattern)【行为型】
一.引言 今天我们开始讲"行为型"设计模式的第八个模式,该模式是[职责链模式],英文名称是:Chain of Responsibility Pattern.让我们看看现实生活中 ...
- java基础数据类型包装类
*/ .hljs { display: block; overflow-x: auto; padding: 0.5em; color: #333; background: #f8f8f8; } .hl ...
- 在Windows上运行Spark程序
一.下载Saprk程序 https://d3kbcqa49mib13.cloudfront.net/spark-2.1.1-bin-hadoop2.7.tgz 解压到d:\spark-2.1.1-bi ...
- gearman学习笔记1
1.简介 gearman是一个分布式开发框架,适合处理一些必须处理但是不影响主流程的操作,比如保存日志.发送邮件.缩略图片等.最早是基于perl语言的,2008年发布的时候改为C++语言开 ...
- 【java】java.util.regex.Pattern和java.util.regex.Matcher简单示例
package 正则; import java.util.regex.Matcher; import java.util.regex.Pattern; public class Test_regex ...
- spring mvc报错,数据库查询无限死循环
进行查询的陷入了无限死循环,原因是问题类中包含了回答,回答类中包含了问题,进入了无限死循环 解决方法:在回答类中的问题类属性上加注解:@JsonBackReference 问题中有回答的set集合,回 ...
- Principle-初步认识(简介)
Principle官网 探究了一下 . 呃--作出了下边这玩意 做的好的是这样的,瞬间把自己给菜了,给大家看看,设计需要UI功夫啊 把这个用上你的界面就搞基了,图形在水平.垂直上的动态效果(*.*) ...
- iOS 常用到的宏#define
//AppDelegate #define APPDELEGATE [(AppDelegate*)[UIApplication sharedApplication] delegate] //----- ...
- PDO绑定含IN的SQL语句的参数注意事项
PDOStatement::bindParam(),表示将PDO::prepare()语句中的占位符用参数替换掉.注意,在绑定含有IN的SQL多参数语句时要额外小心,比如$stmt = $db-> ...
- AVL树的单双旋转操作
把必须重新平衡的节点称为å.对于二叉树,å的两棵子树的高度最多相差2,这种不平衡可能有四种情况: 对å的左儿子的左子树进行插入节点(左-左) 对å的左儿子的右子树进行插入节点(左-右) 对å的右儿子的 ...