您的位置:首页 > Web前端 > JQuery

JQuery中隐式迭代和each的区别(通过反选功能解析)

2012-07-20 20:17 232 查看
最近在学JQuery,发现它的确是个很给力的东东。。。。不过各种符号,各种选择器,稍有点乱,还要在日后工作中经常用才能熟练起来。

今天在学习时,遇到这样一个问题,是在做checkbox的反选按钮时,两种语句,感觉在理论上都能通,但实际用的时候发现有一个不好用,百思不得其解。后来想着想着,好像是想通了。。。所以就说一下JQuery中隐式迭代和each的区别。

思路一:通过隐式迭代来搞定

$("#inverseSelect").click(function(){

$(":checkbox[name=test]").attr("checked",!$(this).attr("checked"));

});

思路二:通过each来搞定

$("#inverseSelect").click(function(){

$(":checkbox[name=test]").each(function(){

//经典代码

$(this).attr("checked",!$(this).attr("checked"));

});

});

产生的问题是,第一种居然不能用!~~~~~~~

个人认为原因是这样:

先来个小插曲:对于JQuery中,$(":checkbox[name=test]")的返回值是个集合。但是,对它取值时,取到的是集合中的第一个Object的对象。

然后进入正题 :

所以,在方法中,$(this).attr("checked") 它的意思是取到this的checked的属性,而问题就出在这个this.注意,它没有放在方法里面,也就是说,this并没有在迭代中使用,那么也就是说,this,指的并不是前面取出的这个集合中迭代的那个元素,那么,他TMD到底指的是什么呢?

开始我以为它指的是$(":checkbox[name=test]")这个集合,那么拿到的应该是第一个元素。后来我发现我错了,它指的是居然是"反选"那个按钮!

为什么呢?原因很简单:

因为观察一下,this的上一层的对象是$("#inverseSelect")啊,所以,大家明白了吧。。。。。

总而言之:this这个关键字,它指的是它所在方法中的那个对象。所以,第一种方法不可以。

第二种方法可以。

原因是:虽然this所在方法的对象是个集合,但是,通过each关键字,这样,this每次拿到的对象,就是集合中的一个元素了。

自己研究出来的,就是有成就感!
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: