JQuery中each()的使用方法說明

對於jQuery對象，只是把each方法簡單的進行了委託：把jQuery對像作為第一個參數傳遞給jQuery的each方法.換句話說：jQuery提供的each方法是對參數一提供的對象的中所有的子元素逐一進行方法呼叫

each()函數是基本上所有的框架都提供了的一個工具類別函數，透過它，你可以遍歷物件、陣列的屬性值並進行處理。 jQuery和jQuery對像都實現了該方法，對於jQuery對象，只是把each方法簡單的進行了委託：把jQuery對像作為第一個參數傳遞給jQuery的each方法.換句話說：jQuery提供的each方法是對參數一提供的物件的中所有的子元素逐一進行方法呼叫。而jQuery物件提供的each方法則是對jQuery內 部的子元素進行逐一呼叫。

each函數根據參數的型別實現的效果不完全一致：

1、遍歷物件(有附加參數)

程式碼如下：

$.each(Object, function(p1, p2) {
     this;       //这里的this指向每次遍历中Object的当前属性值
     p1; p2;     //访问附加参数
}, ['参数1', '参数2']);

2、遍歷數組(有附件參數)

#程式碼如下:

$.each(Array, function(p1, p2){
     this;       //这里的this指向每次遍历中Array的当前元素
     p1; p2;     //访问附加参数
}, ['参数1', '参数2']);

3、遍歷對象(沒有附加參數)

程式碼如下:

$.each(Object, function(name, value) {
     this;      //this指向当前属性的值
     name;      //name表示Object当前属性的名称
     value;     //value表示Object当前属性的值
});

4、遍歷陣列(沒有附加參數)

程式碼如下:

$.each(Array, function(i, value) {
     this;      //this指向当前元素
     i;         //i表示Array当前下标
     value;     //value表示Array当前元素
});

下面提一下jQuery的each方法的幾種常用的用法

#

var arr = [ "one", "two", "three", "four"];  
 $.each(arr, function(){  
 alert(this);  
 });  
//上面这个each输出的结果分别为：one,two,three,four  
  
var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]  
$.each(arr1, function(i, item){  
 alert(item[0]);  
});  
//其实arr1为一个二维数组，item相当于取每一个一维数组，  
//item[0]相对于取每一个一维数组里的第一个值  
//所以上面这个each输出分别为：1 4 7  
 
 
var obj = { one:1, two:2, three:3, four:4};  
$.each(obj, function(key, val) {  
 alert(obj[key]);    
});  
//这个each就有更厉害了，能循环每一个属性  
//输出结果为：1 2 3 4

JQuery中的each函數在1.3.2的官方文件中的描述如下：

each(callback)

#以每一個符合的元素作為上下文來執行一個函數。

意味著，每次執行傳遞進來的函數時，函數中的this關鍵字都指向一個不同的DOM元素（每次都是一個不同的匹配元素）。而且，在每次執行函數時，都會給函數傳遞一個表示作為執行環境的元素在匹配的元素集合中所處位置的數字值作為參數（從零開始的整形）。回傳 'false' 將停止循環 (就像在普通的循環中使用 'break')。傳回 'true' 跳至下一個循環(就像在普通的循環中使用'continue')。

而後面的callback 則是回呼函數，指示遍歷元素的時候應該賦予的運算。先看下面的一個簡單的例子：
迭代兩個圖像，並設定它們的 src 屬性。注意:此處 this 指涉的是 DOM 物件而非 jQuery 物件。

HTML 程式碼:

程式碼如下:

<img/><img/>jQuery 代码: 
$("img").each(function(i){ 
this.src = "test" + i + ".jpg"; 
});

結果:[ 4aa81aff6f7846139a8c0e107b4b55d7, b376996d3e535ce1734234d987b067e5 ]
當然，在遍歷元素的時候，jquery是允許自訂跳出的，請看範例程式碼：你可以使用'return' 提前跳出each() 迴圈。
HTML 程式碼:

程式碼如下：

<button>Change colors</button> 
<span></span> 
<p></p> 
<p></p> 
<p></p> 
<p></p> 
<p id="stop">Stop here</p> 
<p></p> 
<p></p> 
<p></p>

#jQuery 程式碼:

##程式碼如下:

$("button").click(function(){ 
$("p").each(function(index,domEle){ 
$(domEle).css("
background
Color","wheat"); 
if($(this).is("#stop")){ 
$("span").text("在p块为#"+index+"的地方停止。"); 
return false; 
} 
});

或這麼寫：

程式碼如下:

$("button").click(function(){ 
$("p").each(function(index){ 
$(this).css("backgroundColor","wheat"); 
if($(this).is("#stop")){ 
$("span").text("在p块为#"+index+"的地方停止。"); 
return false; 
} 
});

圖解:


each() 方法規定為每個匹配元素規定運行的函數。

提示：傳回 false 可用來及早停止循環。
語法
$(selector).each(function(index,element))參數 描述
function(index,element) 必要。為每個匹配元素規定運行的函數。
•index - 選擇器的index 位置
•element - 目前的元素（也可使用"this" 選擇器

實例
輸出每個li 元素的文字：

複製程式碼 程式碼如下:

$("button").click(function(){
$("li").each (function(){
alert($(this).text())
});
});

實例

obj 物件不是數組 該方法同1的最大區別是：fn方法會被逐次不考慮返回值的進行進行。函數傳回false。

jQuery.each=function( obj, fn, args ) {
if ( args ) {
if ( obj.length == undefined ){
for ( var i in obj )
fn.apply( obj, args );
}else{
for ( var i = 0, ol = obj.length; i < ol; i++ ) {
if ( fn.apply ( obj, args ) === false )
break;
}
}
} else {
if ( obj.length == undefined ) {
for ( var i in obj )
fn.call( obj, i, obj );
}else{
for ( var i = 0, ol = obj.length, val = obj[0]; i < ol && fn.call(val,i,val) !== false; val = obj[++i] ){}
}
}
return obj;
}

需要特別注意的是each方法中fn的具體呼叫方法並不是採用簡單的fn(i,val)或fn(args),而是採用了fn.call(val,i,val)或fn.apply(obj.args)的形式，這意味著，在你自己的fn的實作中，可以直接採用this指標來引用陣列或是物件的子元素。

那怎麼跳出each呢
jquery再遍歷選定的物件時候用each比較方便。有種應用是找到裡面符合條件的物件後，要跳出這個循環。
javascript的跳出循環一般用break.
同事遇到這個問題，下意識 的用了break，想跳出這個循環。結果報錯
SyntaxError: unlabeled break must be inside loop or switch
經查，應該用一個
在回調函數裡return false即可，大多數jq的方法都是如此的

複製程式碼 程式碼如下：

返回'false' 將停止循環(就像在普通的循環中使用'break')。
返回 'true' 跳至下一個循環(就像在普通的循環中使用'continue')。

以上是JQuery中each()的使用方法說明的詳細內容。更多資訊請關注PHP中文網其他相關文章！