JQuery中的each函數(shù)在1.3.2的官方文檔中的描述如下:
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";
});
復(fù)制代碼 代碼如下:
<button>Change colors</button>
<span></span>
<div></div>
<div></div>
<div></div>
<div></div>
<div>Stop here</div>
<div></div>
<div></div>
<div></div>
復(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;
}
});
復(fù)制代碼 代碼如下:
$("button").click(function(){
$("li").each(function(){
alert($(this).text())
});
});
復(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;
}
復(fù)制代碼 代碼如下:
返回 'false' 將停止循環(huán) (就像在普通的循環(huán)中使用 'break')。
返回 'true' 跳至下一個(gè)循環(huán)(就像在普通的循環(huán)中使用'continue')。
新聞熱點(diǎn)
疑難解答
圖片精選