jQuery提供.each()
方法來對選中的結果進行循環處理,而且在每次執行函數時,都會給函數傳遞匹配元素在選中結果裏所處位置的數字值作爲參數(從零開始的整形變量)。返回 'false'
將停止循環 (就像在普通的循環中使用 'break'
)。返回 'true'
跳至下一個循環(就像在普通的循環中使用'continue'
)。
例子一:演示
<ul>
<li>第一列</li>
<li>第二列</li>
<li>第三列</li>
</ul>
<button>選中所有列</button>
//使用下面的jQuery代碼,點擊按鈕後,所有列將被選擇,並且在每列後加上index
$('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代碼,點擊按鈕後,class爲“mark”的列將被選擇
$('button').click(function(){
$('li').each(function(index){
if ($(this).is(".mark")){
this.style.color = 'blue';
}
});
});
//如果我們只想選第一個class爲"mark"的列,可以使用return false,停止循環
$('button').click(function(){
$('li').each(function(index){
if ($(this).is(".mark")){
this.style.color = 'blue';
return false; //注意這個return
}
});
});
注意:在上述例子裏,我用到了$(this)
和this
, 前者是jQuery對象,後者是DOM對象。jQuery對象具有is
方法,但不具有style
方法,同理,DOM對象具有style
方法,但不具有is
方法。