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方法的幾種常用的用法：

each(callback) 
#以每一個匹配的元素作為上下文來執行一個函數。 
意味著，每次執行傳遞進來的函數時，函數中的this關鍵字都指向一個不同的DOM元素（每次都是一個不同的匹配元素）。而且，在每次執行函數時，都會給函數傳遞一個表示作為執行環境的元素在匹配的元素集合中所處位置的數字值作為參數（從零開始的整形）。回傳 'false' 將停止循環 (就像在普通的循環中使用 'break')。傳回 'true' 跳至下一個循環(就像在普通的循環中使用'continue')。 
而後面的callback 則是回呼函數，指示遍歷元素的時候應該給予的運算。先看下面的一個簡單的例子： 
迭代兩個圖像，並設定它們的 src 屬性。注意:此處 this 指涉的是 DOM 物件而非 jQuery 物件。 

<img></img/>
$("img").each(function(i){ 
this.src = "test" + i + ".jpg"; 
}); 
结果:[ <img src="test0.jpg" />, <img src="test1.jpg" /> ]

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

程式碼如下:

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

jQuery 程式碼: 

##程式碼如下:

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

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

提示：傳回 false 可用來及早停止循環。 

語法 
$(selector).each(function(index,element))參數 描述 
function(index,element) 必要。為每個匹配元素規定運行的函數。
•index - 選擇器的index 位置 
•element - 目前的元素（也可使用"this" 選擇器 

obj 物件不是陣列 

該方法同1的最大差異是：fn方法會被逐次不考慮傳回值的進行進行。 ##需要特別注意的是each方法中fn的具體呼叫方法並不是採用簡單的fn(i,val)或fn(args),而是採用了fn.call(val,i,val)或fn.apply (obj.args)的形式，這意味著，在你自己的fn的實作中，可以直接採用this指標來引用數組或是物件的子元素。

以上是jquery物件中each方法使用實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！