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

区别和详解：jQuery中的 $().each()和$.each()/jQuery.each()

2016-06-23 09:09 453 查看

1、认识
　　$().each()遍历当前jQuery对象，并在每一个元素上执行回调函数。其方法内部是通过调用静态方法jQuery.each()来实现的。
　　jQuery.each()是一个通用的遍历迭代的静态方法，用于无缝的遍历对象或者数组。如果是数组,回调函数每次传入数组的索引和对应的值(值亦可以通过this关键字获取,但javascript总会包装this值作为一个对象—尽管是一个字符串或是一个数字),方法会返回被遍历对象的第一参数。
2、语法：

2.1、$(selector).each(function(index,element)
描述：

function(index,element)

必需。为每个匹配元素规定运行的函数。

index-选择器的index位置

element-当前的元素（也可使用"this"选择器）

2.2、jQuery.each(collection,callback(indexInArray,valueofElement))

3、$().each()和$.each(）实例：
3.1、.each()
描述：输出每个li元素的文本：
HTML代码

<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>

JS代码：

$(document).ready(function(){
$("li").each(function(){
alert($(this).text())
});
});

结果为：CoffeeMilkSoda

3.2、[b]jQuery.each()[/b]
3.2.1、each处理一维数组

vararr1=["aaa","bbb","ccc"];
$.each(arr1,function(i,val){
alert(i);
alert(val);
});
alert(i)将输出为：0，1，2
alert(val)将输出为：aaa，bbb，ccc

3.2.2、each处理二维数组

vararr2=[['a','aa','aaa'],['b','bb','bbb'],['c','cc','ccc']]
$.each(arr,function(i,item){
alert(i);
alert(item);
});
alert(i)将输出为：0，1，2
alert(item)将输出为：['a','aa','aaa']，['b','bb','bbb']，['c','cc','ccc']

3.2.3、对此二位数组的处理稍作变更之后

vararr=[['a','aa','aaa'],['b','bb','bbb'],['c','cc','ccc']]
　　$.each(arr,function(i,item){
　　$.each(item,function(j,val){
　　　　alert(j);
　　　　alert(val);
　});
});
alert(j)输出为：0，1，2，0，1，2，0，1，2
alert(val)输出为：a，aa，aaa，b，bb，bbb，c，cc，ccc

3.2.4、each处理json数据，这个each就有更厉害了，能循环每一个属性

varobj={one:1,two:2,three:3};
$.each(obj,function(key,val){
alert(key);
alert(val);
});
alert(key)输出为：onetwothree
alert(val)输出为：123

3.2.5、如果不想输出第一项(使用retruntrue)进入下一遍历

varmyArray=["skipThis","dothis","andThis"];
$.each(myArray,function(index,value){
if(index==0){
returntrue;//equivalentto‘continue'withanormalforloop
}
//elsedostuff…
alert(index+“:“+value);
});
结果为：1:dothis
结果为：2:andThis

3.2.6、回调函数中returnfalse时可以退出$.each(),如果返回一个非false即会像在for循环中使用continue一样,会立即进入下一个遍历.

HTML代码：

<body>
<divid=”one”></div>
<divid=”two”></div>
<divid=”three”></div>
<divid=”four”></div>
<divid=”five”></div>
</body>

JS代码：

vararr=["one","two","three","four","five"];//数组
varobj={one:1,two:2,three:3,four:4,five:5};//对象
jQuery.each(arr,function(){//this指定值
$(“#”+this).text(“Mineis”+this+“.”);//this指向为数组的值,如one,two
return(this!=“three”);//如果this=three则退出遍历
});
jQuery.each(obj,function(i,val){//i指向键,val指定值
$(“#”+i).append(document.createTextNode(”–”+val));
});

结果为：

Mineisone.
Mineistwo.
Mineisthree.
–1
-2
-3
-4
-5

4、扩展
其实jQuery里的each方法是通过js里的call方法来实现的。

下面简单介绍一下call方法。
call这个方法很奇妙，其实官方的说明是：“调用一个对象的一个方法，以另一个对象替换当前对象。”网上更多的解释是变换上下文环境，也有说是改变上下文this指针。
call([thisObj[,arg1[,arg2[,[,.argN]]]]])
参数：thisObj--->可选项。将被用作当前对象的对象。
参数：arg1,arg2,,argN--->可选项。将被传递方法参数序列。

说明:
call方法可以用来代替另一个对象调用一个方法。call方法可将一个函数的对象上下文从初始的上下文改变为由thisObj指定的新对象。
如果没有提供thisObj参数，那么Global对象被用作thisObj。

functionadd(a,b)
{
alert(a+b);
}
functionsub(a,b)
{
alert(a-b);
}
add.call(sub,3,1);

这个例子中的意思就是用add来替换sub，add.call(sub,3,1)==add(3,1)，所以运行结果为：alert(4);
//注意：js中的函数其实是对象，函数名是对Function对象的引用。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航