jQuery選擇器示例

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方法。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章