[JQuery] $().each 和 $.each() 的区别
来源:互联网 发布:微信回调域名 编辑:程序博客网 时间:2024/05/22 06:48
在jquery中,遍历对象和数组,经常会用到$().each和$.each(),两个方法。两个方法是有区别的,从而这两个方法在针对不同的操作上,显示了各自的特点。
$().each,对于这个方法,在dom处理上面用的较多。如果页面有多个input标签类型为checkbox,对于这时用$().each来处理多个checkbook,例如:
$(“input[name=’ch’]”).each(function(i){
if($(this).attr(‘checked’)==true)
{
//一些操作代码
}
回调函数是可以传递参数,i就为遍历的索引。
对于遍历一个数组,用$.each()来处理,简直爽到了极点。例如:
$.each([{“name”:”limeng”,”email”:”xfjylimeng”},{“name”:”hehe”,”email”:”xfjylimeng”},function(i,n)
{
alert(“索引:”+i,”对应值为:”+n.name);
});
参数i为遍历索引值,n为当前的遍历对象.
var arr1 = [ “one”, “two”, “three”, “four”, “five” ];
$.each(arr1, function(){
alert(this);
});
输出:one two three four five
var arr2 = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
$.each(arr2, function(i, item){
alert(item[0]);
});
输出:1 4 7
var obj = { one:1, two:2, three:3, four:4, five:5 };
$.each(obj, function(key, val) {
alert(obj[key]);
});
输出:1 2 3 4 5
在jQuery里有一个each方法,用起来非常的爽,不用再像原来那样写for循环,jQuery源码里自己也有很多用到each方法。
其实jQuery里的each方法是通过js里的call方法来实现的。
下面简单介绍一下call方法。
call这个方法很奇妙,其实官方的说明是:“调用一个对象的一个方法,以另一个对象替换当前对象。”网上更多的解释是变换上下文环境,也有说是改变上下文this指针。
call([thisObj[,arg1[, arg2[, [,.argN]]]]])
参数
thisObj
可选项。将被用作当前对象的对象。
arg1, arg2, , argN
可选项。将被传递方法参数序列。
说明
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
引用网上有一个很经典的例子
Js代码
function add(a,b)
{
alert(a+b);
}
function sub(a,b)
{
alert(a-b);
}
add.call(sub,3,1);
用 add 来替换 sub,add.call(sub,3,1) == add(3,1) ,所以运行结果为:alert(4);
注意:js 中的函数其实是对象,函数名是对 Function 对象的引用。
具体call更深入的就不在这里提了。
下面提一下jQuery的each方法的几种常用的用法
Js代码
var arr = [ “one”, “two”, “three”, “four”];
$.each(arr, function(){
alert(this);
});
//上面这个each输出的结果分别为:one,two,three,four
var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]
$.each(arr1, function(i, item){
alert(item[0]);
});
//其实arr1为一个二维数组,item相当于取每一个一维数组,
//item[0]相对于取每一个一维数组里的第一个值
//所以上面这个each输出分别为:1 4 7
var obj = { one:11, two:22, three:33, four:44};
$.each(obj, function(key, val) {
alert(obj[key]);
});
//这个each就有更方便了,能循环每一个属性
//输出结果为:11 22 33 44
========================
另外,查看一个简单的jQuery的例子来遍历一个JavaScript数组对象。
var json = [{"id":"1","tagName":"apple"},{"id":"2","tagName":"orange"},{"id":"3","tagName":"banana"},{"id":"4","tagName":"watermelon"},{"id":"5","tagName":"pineapple"}]; $.each(json, function(idx, obj) {alert(obj.tagName);});上面的代码片断工作正常,提示 “apple”, “orange” … 等,如预期一样。
问题: JSON 字符串
下面的例子中,声明了一个JSON字符串(随附单或双引号)直接地。
var json = '[{"id":"1","tagName":"apple"},{"id":"2","tagName":"orange"},{"id":"3","tagName":"banana"},{"id":"4","tagName":"watermelon"},{"id":"5","tagName":"pineapple"}]'; $.each(json, function(idx, obj) {alert(obj.tagName);});在Chrome中,它显示在控制台下面的错误:
Uncaught TypeError: Cannot use 'in' operator to search for '156' in [{"id":"1","tagName":"apple"}...解决方案:JSON字符串转换为JavaScript对象。
要修复它,通过标准JSON.parse()或jQuery 的 $.parseJSON 将其转换为JavaScript对象。
var json = '[{"id":"1","tagName":"apple"},{"id":"2","tagName":"orange"},{"id":"3","tagName":"banana"},{"id":"4","tagName":"watermelon"},{"id":"5","tagName":"pineapple"}]'; $.each(JSON.parse(json), function(idx, obj) {alert(obj.tagName);}); //or $.each($.parseJSON(json), function(idx, obj) {alert(obj.tagName);});
参考:
- jQuery $each() example
- Wikipedia : JSON
- jquery的$().each和$.each的区别
- jquery的$.each() 和$("div").each() 区别
- jQuery:each()和$.each()的区别
- [JQuery] $().each 和 $.each() 的区别
- jquery$().each和$.each()遍历的区别
- jquery的$().each,$.each区别
- jquery的$().each,$.each区别
- JQuery的$().each和$.each
- jquery的$(#id).each()和jquery.each()的用法区别
- $().each和$.each()的区别
- $().each和$.each()的区别
- $().each() 和$.each 的区别
- JQuery中$.each 和$(selector).each()的区别详解【转】
- jquery中$.each()与$().each()的用法和区别
- jQuery中$.each()和$(selector).each()的区别
- JQuery中$.each 和$(selector).each()的区别
- JQuery中$.each 和$(selector).each()的区别详解
- JQuery中$.each 和$(selector).each()的区别详解
- docker环境下的python服务器端开发
- 手把手教你把Vim改装成一个IDE编程环境(图文)
- nyoj 笨蛋难题四 739 (简单数学题)
- netty5学习笔记-内存池6-可调优参数
- bzoj-2051 A Problem For Fun
- [JQuery] $().each 和 $.each() 的区别
- CSDN界面改版了终于
- POI操作EXCEL
- 欢迎使用CSDN-markdown编辑器
- 【读书笔记】:哈工大软件学院计算机网络期末复习概要
- 软件设计度量工具structure101学习(一):structure101试用版licence的获取以及众多的structure101系列工具
- kvm配置网络
- 自定义Dialog
- Java解压缩文件(利用apache的ant包)