|
|
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ù)（從零開(kāi)始的整形）。返回 '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;
}
});
或者這么寫(xiě)：
復(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')。
JavaScript技術(shù)：JQuery中each()的使用方法說(shuō)明，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
