jQuery如何處理多個選擇結果

本文小編為大家詳細介紹“jQuery如何處理多個選擇結果”，內容詳細，步驟清晰，細節處理妥當，希望這篇“jQuery如何處理多個選擇結果”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

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

例子一：

<ul>

<li>第一列</li>

<li>第二列</li>

<li>第三列</li>

</ul>

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

使用下面的 jQuery 代碼，點擊按鈕后，所有列將被選擇，并且在每列后加上 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 代碼,點擊按鈕后，class 為“mark”的列將被選擇

$(document).ready(function() {

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

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

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

this.style.color = 'blue';

}

});

});

});

如果我們只想選第一個 class 為"mark"的列，可以使用 return false，停止循環

$(document).ready(function() {

$('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 方法。

讀到這里，這篇“jQuery如何處理多個選擇結果”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。