$(selector).each()與$.each()方法的區別

admin發表於2017-04-05

本章節介紹一下這兩個方法的區別，首先這兩個方法從"長相"上看就有很大的相似之處，那麼功能上也有相似之處，當然也有區別，否則的話就沒有必要使用兩個形式了，下面進入正題。

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

此方法可以遍歷物件和陣列。

物件可以是非jQuery物件。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<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物件集合。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<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物件。

相關閱讀:

1.$.each()方法可以參閱jQuery.each()一章節。

2.$(selector).each()方法可以參閱jQuery each()一章節。 

相關文章