jquery中的Each()非常好用,用起来很爽。下面小编来介绍一下jquery中each()的用法。有兴趣的朋友来看看吧。
Each()方法可以使DOM循环结构简洁,不易出错。每个()函数都封装了一个非常强大的遍历函数,并且易于使用。可以遍历一维数组,多维数组,DOM,JSON等等。
在javaScript开发中使用$each可以大大减少我们的工作量。
下面提一下each的几种常用的用法
each处理一维数组
var arr1=[ 'aaa ',' bbb ',' CCC '];
$.每个(arr1,函数(I,val){
警报(一);
警报(val);
});
警报(I)将输出0,1,2
警报(val)将输出aaa、bbb和ccc。
each处理二维数组
var arr 2=[' a ',' aa ',' aaa'],['b ',' bb'],['c ',' cc ',' ccc']]
$.每个(arr,function(i,item){
警报(一);
警报(项目);
});
Arr2是一个二维数组,item相当于取这些二维数组中的每一个。
Item[0]相对于获取每个一维数组中的第一个值。
Alert(i)将输出0,1,2,因为这个二维数组包含三个数组元素。
警报(项目)将输出为['a ',' aa ',' aaa'],['b ',' bb ',' bbb'],['c ',' cc ',' ccc']
在这个两位数组的处理过程中稍作改变后
var arr=[' a ',' aa ',' aaa'],['b ',' bb'],['c ',' cc ',' ccc']]
$.每个(arr,function(i,item){
$.每个(项目,函数(j,val){
alert(j);
警报(val);
});
});
Alert(j)将输出0,1,2,0,1,2,0,1,2。
警报(val)将输出为A、aa、aaa、B、bb、bbb、C、cc、ccc
每个都处理json数据,而且每个都更加强大。它可以循环每个属性。
var obj={一:1,二:2,三:3 };
each(obj,function(key,val) {
警报(键);
警报(val);
});
这里alert(键)会输出一二三。
Alert(val)将输出一、一、二、二、三、三
为什么这里的键不是数字而是属性?因为json格式是一组无序的属性值。既然是无序的,就没有编号。
而这个val相当于obj[key]
Ecah处理dom元素。这里,以输入表单元素为例。
如果您的dom中有这样的代码
input name=' AAA ' type=' hidden ' value=' 111 '/
input name=' BBB ' type=' hidden ' value=' 222 '/
输入名称='ccc '类型='隐藏'值='333' /
输入名称='ddd '类型='hidden '值='444'/
然后,您可以按如下方式使用每种方法
$.each($('input:hidden '),function(i,val){
警报(val);
警报(一);
alert(val . name);
警报(值);
});
然后,alert(val)会输出[object HTMLInputElement],因为它是一个表单元素。
警报(I)将输出为0,1,2,3
alert(val . name);Aaa,bbb,ccc,ddd都会输出。如果使用this.name,将输出相同的结果。
警报(值);将输出111,222,333,444,如果使用此值,将输出相同的结果。
如果将上述代码更改为以下形式
$('input:hidden ')。每个(函数(I,val){
警报(一);
alert(val . name);
警报(值);
});
如你所见,输出结果是一样的,我还是不知道两种写法的区别。将此更改应用到上述数组的操作也将输出相同的结果。
就这样,回答了几个例子的实际结果。然后继续研究,总是不能知道为什么。
从上面的例子可以看出,jQuery和jQuery对象都实现了这个方法。对于jQuery对象,每个方法都是简单的委托:jQuery对象作为第一个参数传递给jQuery的每个方法。
看下jQuery中的each实现(网络摘抄)
函数(对象、回调、参数){
//这个方法有三个参数:要操作的对象obj,要操作的函数fn,函数的参数args。
var name,i=0,length=object.length
if (args) {
if (length==undefined) {
对于(对象中的名称){
if (callback.apply(object[name],args)==false){
打破;
}
}
}否则{
for(;I长度;) {
if (callback.apply(object[i ],args)==false){
打破;
}
}
}
}否则{
if (length==undefined) {
对于(对象中的名称){
if (callback.call(object[name],name,object[name])===false) {
打破;
}
}
}否则{
for(var value=object[0];I长度callback.call(value,I,value)!==假;value=object[ i]) {}
/*object[0]获取jQuery对象中的第一个DOM元素,通过for循环,
遍历整个jQuery对象对应的每个DOM元素,传递callback.call( value,I,value);
将回调的这个对象指向value对象,传递两个参数,I代表索引值,value代表DOM元素;
其中回调是一个类似于function(index,elem) {.}.
所以你得到$(' . ')).每个(函数(索引,元素){.});
*/
}
}
返回对象;
}
Jquery会根据传入的元素自动判断,然后根据判断结果采取apply或call方法。在fn的实现中,可以直接使用这个指针来引用数组或者对象的子元素。
1.obj对象是数组
每个方法都会逐个调用数组中子元素的fn函数,直到调用一个子元素返回的结果为false。也就是说,我们可以对提供的fn函数进行处理,使其满足一定的条件,然后退出每个方法调用。每个方法提供arg参数时,fn函数调用传入的参数是arg;否则就是:子元素索引,子元素本身。
2.obj 对象不是数组
这种方法和1最大的区别是fn方法会连续进行,不考虑返回值。也就是说,obj对象的所有属性都会被fn方法调用,即使fn函数返回false。调用传递的参数类似于1。
郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。