$(selector).each()与$.each()方法的区别

快乐打工仔发布于 8个月前分类：实例代码

本章节介绍一下这两个方法的区别，首先这两个方法从"长相"上看就有很大的相似之处，那么功能上也有相似之处，当然也有区别，否则的话就没有必要使用两个形式了，下面进入正题。

一.$(selector).each()方法:

此方法可以遍历对象和数组。

对象可以是非jQuery对象。

代码实例如下:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.pipipi.net/" /> 
<title>jQuery.each()-犀牛前端部落</title> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$("button").click(function(){ 
   $.each([0,4,8],function(i,n){ 
    alert("数组元素索引和对应的数组元素为:"+i+":"+n); 
   }) 
}) 
}) 
</script> 
</head> 
<body> 
<button>查看效果</button> 
</body> 
</html>

以上代码可以便利数组中的每一个元素。

二.$.each()方法:

此方法可以以匹配元素集合中每一个元素作为上下文去执行一个函数。

当每次执行函数时，函数的执行环境都是一个匹配元素集合中不同的DOM元素，并且会将此元素在集合中索引传递给此函数，索引值是从0开始的。

此方法只能够遍历jQuery对象集合。

代码实例如下:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.pipipi.net/" /> 
<title>each()函数-犀牛前端部落</title> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$("#btn").click(function(){ 
  $("li").each(function(index,element){ 
    alert($(element).text()) 
  }) 
}) 
}) 
</script> 
</head> 
<body> 
<ul> 
  <li>后台专区</li> 
  <li>前台专区</li> 
  <li>数据库专区</li> 
  <li>站长专区</li> 
</ul> 
<button id="btn">点击查看效果</button> 
</body> 
</html>

以上代码实现了我们的要求，可以遍历jQuery对象集合中的每一个元素。

两个方法的相同点就是都有遍历功能，不同点就是$.each()方法是通用遍历方法，能够遍历任何对象和数组，而$(selector).each()方法只能够遍历jQuery对象。