jQuery each() 方法

￡神魔★判官ぃ 2021-09-13 23:22 437阅读 0赞

# 概述： #

jQuery中的 each 函数很方便,`$.each ()`函数封装了十分强大的遍历功能，它可以遍历一维数组、多维数组、DOM ，JSON 等等。

`$.each()`与`$(selector).each()`不同，后者专用于jquery对象的遍历, 前者可用于遍历任何的集合(无论是数组或对象)。

--------------------

# each的几种常用的用法： #

## 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

--------------------

## each处理二维数组 ##

var arr2 = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']] 
    $.each(arr, function(i, item){ 
    
         alert(i);
         alert(item);
    
        });

**结果：**

arr2为一个二维数组，item相当于取这二维数组中的每一个数组。  
item\[0\]相对于取每一个一维数组里的第一个值  
alert(i)将输出为0，1，2，因为这二维数组含有3个数组元素  
alert(item)将输出为 \[‘a’, ‘aa’, ‘aaa’\]，\[‘b’, ‘bb’, ‘bbb’\]，\[‘c’, ‘cc’, ‘ccc’\]

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

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

--------------------

## each处理json数据 ##

**使用each处理json数据能循环每一个属性**

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

**结果：**

这里alert(key)将输出one two three  
alert(val)将输出one，1，two，2，three,3  
这边为何key不是数字而是属性呢，因为json格式内是一组无序的属性-值，既然无序，又何来数字呢。  
而这个val等同于obj\[key\]

--------------------

## ecah处理dom元素 ##

**此处以一个input表单元素作为例子**

**使用each如下**

$.each($("input:hidden"), function(i,val){
    
        alert(val);
        alert(i);
        alert(val.name);
        alert(val.value);
    
        });

**结果：**

alert(val)将输出\[object HTMLInputElement\]，因为它是一个表单元素。  
alert(i)将输出为0，1，2，3  
alert(val.name);将输出aaa,bbb,ccc,ddd，如果使用this.name将输出同样的结果  
alert(val.value); 将输出111,222,333,444，如果使用this.value将输出同样的结果