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

2016-06-23 09:09 流浪的诗人阅读(3612) 评论(2) 编辑收藏举报

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())
    });
});

结果为：Coffee Milk Soda

3.2、 jQuery.each()

3.2.1、each处理一维数组

 var arr1 = [ "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处理二维数组

var arr2 = [['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、对此二位数组的处理稍作变更之后

  var arr = [['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就有更厉害了，能循环每一个属性

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

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

var myArray=["skipThis", "dothis", "andThis"];
$.each(myArray, function(index, value) {
     if (index == 0) {
     return true; // equivalent to ‘continue' with a normal for loop
}
     // else do stuff…
     alert (index + “: “+ value);
});
结果为：1:dothis
结果为：2:andThis

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

HTML代码：

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

JS代码：

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

结果为：

Mine is one. 
Mine is two.
Mine is three.
– 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。

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 对象的引用。

刷新页面返回顶部

流浪的诗人

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

About