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