jquery each() 方法_jquery ecah-优快云博客

本文链接：https://blog.youkuaiyun.com/yaogao000/article/details/8192555

jquery each() 方法

each()函数可以遍历一维数组、多维数组、DOM, JSON 等等，在javaScript开发过程中使用$each可以大大的减轻我们的工作量。

下面提一下each的几种常用的用法

each处理一维数组：

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
  var arr1 = [ "aaa", "bbb", "ccc" ];      
  $.each(arr1, function(index,element){      
      $('p').append("&nbsp;&nbsp;"+index+" : "+ element)
  });   
});
</script>
</head>

<body>
<p></p>
</body>
</html>

结果： 0 : aaa 1 : bbb 2 : ccc

each处理二维数组

var arr = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]      
　　$.each(arr, function(index, element){      
      $('p').append("  "+index+" : "+ element);    
　　});

结果： 0 : a,aa,aaa 1 : b,bb,bbb 2 : c,cc,ccc

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

var arr = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]      
 　　$.each(arr, function(index, element){      
      　　$.each(element,function(j,val){
       　　　 $('p').append(j+"  ");
        　　　$('p').append(val+"  ");
    　}); 
});

结果： 0 a 1 aa 2 aaa 0 b 1 bb 2 bbb 0 c 1 cc 2 ccc

each处理json数据

var obj = { one:1, two:2, three:3};      
 　　$.each(obj, function(key, val) {      
      　$('p').append(key +"  "+ val+"  ");    
 　　});

结果：one 1 two 2 three 3

ecah处理dom元素

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
 $.each($("input:hidden"), function(index,element){  
       $('p').append(index+"  "+element+"  "+element.name+"  "+element.value+"<br/>");
 });   
});
</script>
</head>

<body>
<input name="aaa" type="hidden" value="111" />
<input name="bbb" type="hidden" value="222" />
<input name="ccc" type="hidden" value="333" />
<input name="ddd" type="hidden"  value="444"/>
<p></p>
</body>
</html>

结果：

0  [object HTMLInputElement]  aaa  111
1  [object HTMLInputElement]  bbb  222
2  [object HTMLInputElement]  ccc  333
3  [object HTMLInputElement]  ddd  444

当然这个例子中的

$.each($("input:hidden"), function(index,element){
$('p').append(index+"  "+element+"  "+element.name+"  "+element.value+"<br/>");
});

可以替换为：
$("input:hidden").each(function(index,element){
$('p').append(index+"  "+element+"  "+element.name+"  "+element.value+"<br/>");
});

处理结果也是一样的