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

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

 arr = ["one", "two", "three", "four" arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 90 obj = {one: 1, two: 2, three: 3, four: 4

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

#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><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("backgroundColor", "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;
        }
    })
}

或這麼寫： 

程式碼如下:

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

圖解:

#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方法会被逐次不考虑返回值的进行进行。换句话说，obj对象的所有属性都会被fn方法进行调用，即使fn函数返回false。调用传入的参数同1类似。 

代码如下:

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中文網其他相關文章！