jQuery 提供 .each() 方法來對(duì)選中的結(jié)果進(jìn)行循環(huán)處理,而且在每次執(zhí)行函數(shù)時(shí),都會(huì)給函數(shù)傳遞匹配元素在選中結(jié)果里所處位置的數(shù)字值作為參數(shù)(從零開始的整形變量)。返回 '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 是從零開始的整形變量。
例子二:
<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 方法。