jQuery基礎(chǔ):處理多個(gè)選擇結(jié)果(each迭代方法)

jQuery提供.each()方法來(lái)對(duì)選中的結(jié)果進(jìn)行循環(huán)處理，而且在每次執(zhí)行函數(shù)時(shí)，都會(huì)給函數(shù)傳遞匹配元素在選中結(jié)果里所處位置的數(shù)字值作為參數(shù)（從零開(kāi)始的整形變量）。返回 'false' 將停止循環(huán) (就像在普通的循環(huán)中使用 'break')。返回 'true' 跳至下一個(gè)循環(huán)(就像在普通的循環(huán)中使用'continue')。
例子一

<ul>

<li>第一列</li>

<li>第二列</li>

<li>第三列</li>

</ul>

<button>選中所有列</button>

//使用下面的jQuery代碼，點(diǎn)擊按鈕后，所有列將被選擇，并且在每列后加上index
$(document).ready(function() {
$('button').click(function(){


$('li').each(function(index){

var str = "<b>"+index+"</b>";

$("li:eq("+index+")").append(str);

});

});
});
//注意：index是從零開(kāi)始的整形變量。
例子二

<ul>

<li>第一列</li>

<li>第二列</li>

<li class="mark">第三列</li>

<li class="mark">第四列</li>

</ul>

<button>選擇列</button>

//使用下面的jQuery代碼,點(diǎn)擊按鈕后，class為“mark”的列將被選擇
$(document).ready(function() {
$('button').click(function(){


$('li').each(function(index){

if ($(this).is(".mark")){

this.style.color = 'blue';

}

});

});
});

//如果我們只想選第一個(gè)class為"mark"的列，可以使用return false，停止循環(huán)

$(document).ready(function() {
$('button').click(function(){


$('li').each(function(index){

if ($(this).is(".mark")){

this.style.color = 'blue';

return false; //注意這個(gè)return

}

});

});
});

注意：在上述例子里，我用到了$(this)和this, 前者是jQuery對(duì)象，后者是DOM對(duì)象。jQuery對(duì)象具有is方法，但不具有style方法，同理，DOM對(duì)象具有style方法，但不具有is方法。