each(callback)?

以每一個(gè)匹配的元素作為上下文來(lái)執(zhí)行一個(gè)函數(shù)。?

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

而后面的callback 則是回調(diào)函數(shù)，指示遍歷元素的時(shí)候應(yīng)該賦予的操作。先看下面的一個(gè)簡(jiǎn)單的例子：?
迭代兩個(gè)圖像，并設(shè)置它們的 src 屬性。注意:此處 this 指代的是 DOM 對(duì)象而非 jQuery 對(duì)象。?

HTML 代碼:?

復(fù)制代碼代碼如下:
<img/><img/>jQuery 代碼:?
$("img").each(function(i){?
this.src = "test" + i + ".jpg";?
});?

結(jié)果:[ <img src="test0.jpg" />, <img src="test1.jpg" /> ]?
當(dāng)然，在遍歷元素的時(shí)候，jquery是允許自定義跳出的，請(qǐng)看示例代碼：你可以使用 'return' 來(lái)提前跳出 each() 循環(huán)。?
HTML 代碼:?

復(fù)制代碼代碼如下:
<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 代碼:?

復(fù)制代碼代碼如下:
$("button").click(function(){?
$("div").each(function(index,domEle){?
$(domEle).css("backgroundColor","wheat");?
if($(this).is("#stop")){?
$("span").text("在div塊為#"+index+"的地方停止。");?
return false;?
}?
});?

或者這么寫：?

復(fù)制代碼代碼如下:
$("button").click(function(){?
$("div").each(function(index){?
$(this).css("backgroundColor","wheat");?
if($(this).is("#stop")){?
$("span").text("在div塊為#"+index+"的地方停止。");?
return false;?
}?
});?

圖解:


each() 方法規(guī)定為每個(gè)匹配元素規(guī)定運(yùn)行的函數(shù)。

提示：返回 false 可用于及早停止循環(huán)。?
語(yǔ)法?
$(selector).each(function(index,element))參數(shù) 描述?
function(index,element) 必需。為每個(gè)匹配元素規(guī)定運(yùn)行的函數(shù)。?
?index - 選擇器的 index 位置?
?element - 當(dāng)前的元素（也可使用 "this" 選擇器?

實(shí)例?
輸出每個(gè) li 元素的文本：?

復(fù)制代碼代碼如下:
$("button").click(function(){?
$("li").each(function(){?
alert($(this).text())?
});?
});?

實(shí)例?
obj 對(duì)象不是數(shù)組?
該方法同1的最大區(qū)別是：fn方法會(huì)被逐次不考慮返回值的進(jìn)行進(jìn)行。換句話說(shuō)，obj對(duì)象的所有屬性都會(huì)被fn方法進(jìn)行調(diào)用，即使fn函數(shù)返回false。調(diào)用傳入的參數(shù)同1類似。?

復(fù)制代碼代碼如下:
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的具體調(diào)用方法并不是采用簡(jiǎn)單的fn(i,val)或fn(args),而是采用了fn.call(val,i,val)或fn.apply(obj.args)的形式，這意味著，在你自己的fn的實(shí)現(xiàn)中，可以直接采用this指針引用數(shù)組或是對(duì)象的子元素。?

那怎么跳出each呢?
jquery再遍歷選定的對(duì)象時(shí)候用each比較方便。有種應(yīng)用是找到里面符合條件的對(duì)象后，要跳出這個(gè)循環(huán)。?
javascript的跳出循環(huán)一般用break.?
同事遇到這個(gè)問(wèn)題，下意識(shí) 的用了break，想跳出這個(gè)循環(huán)。結(jié)果報(bào)錯(cuò)?
SyntaxError: unlabeled break must be inside loop or switch?
經(jīng)查，應(yīng)該用一個(gè)?
在回調(diào)函數(shù)里return false即可，大多數(shù)jq的方法都是如此的?

復(fù)制代碼代碼如下:
返回 'false' 將停止循環(huán) (就像在普通的循環(huán)中使用 'break')。?
返回 'true' 跳至下一個(gè)循環(huán)(就像在普通的循環(huán)中使用'continue')。?

轉(zhuǎn)載于:https://www.cnblogs.com/good10001/p/4760411.html

總結(jié)

以上是生活随笔為你收集整理的JQuery中each()的使用方法说明的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。