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每次拿到的对象,就是集合中的一个元素了。
自己研究出来的,就是有成就感!
今天在学习时,遇到这样一个问题,是在做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每次拿到的对象,就是集合中的一个元素了。
自己研究出来的,就是有成就感!
相关文章推荐
- JQuery中隐式迭代和each的区别(通过反选功能解析)
- jQuery 链式编程/隐式迭代/each方法/多库共存
- jQuery实现全选于反选功能
- JQuery学习(4)全选反选功能的实现
- 基于jquery实现表格内容筛选功能实例解析
- ajax方法参数详解与$.each()和jquery里面each方法的区别
- JQuery中$.each 和$(selector).each()的区别详解
- 通过AJAX的JS、JQuery两种方式解析XML
- 通过AJAX的JS、JQuery两种方式解析XML示例介绍
- 通过jQuery的camelCase方法,解析string的replace()函数
- jquery 隐式迭代
- jquery中事件委派代码分析以及jQuery中delegate和on的用法与区别详细解析
- android学习记录(五)显式Intent与隐式Intent的功能与使用方法解析。
- jquery的$().each,$.each的区别
- Jquery的$(selector).each()和$.each()原理和区别
- jquery的$().each,$.each的区别
- 通过斐波那契数列来比较递归和迭代的区别
- jQuery中delegate和on的用法与区别详细解析
- JQuery学习(4)全选反选功能的实现
- jquery的$().each,$.each的区别