Sep 7

[原]在jQuery的each()函数中使用continue和break 不指定

linuxing , 17:55 , 编程 » JavaScript , 评论(1) , 引用(0) , 阅读(26179) , Via 本站原创 | |
    jQuery的each函数可调用选择器得到的元素集进行循环调用。这意味着,每次执行传递进来的函数时,函数中的this关键字都指向一个不同的DOM元素(每次都是一个不同的匹配元素)。而且,在每次执行函数时,都可以给函数传递一个表示作为执行环境的元素(index),在匹配的元素集合中所处位置的数字值作为参数(从零开始的整形)。

一、遍历
以下面的HTML为例:
引用
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>

可使用下面的代码给每个li设置同一个CSS样式:

$('li').css("border","1px red solid");


二、遍历中对某个元素操作
jQuery有默认迭代的特性,但如果希望对迭代中的某个符合条件的元素操作,则需要使用each函数:
$('li').each(function(index){
  if(index==2 || $(this).attr('id') == 'addClass') $(this).css("border","1px red solid");              
  });


三、终止或跳过循环
涉及迭代,不可避免需要有非正常终止,或强制跳过的情况。在jQuery的each函数中,存在以下关系:
引用
continue :return true;
break :return false;
直接return也会跳出jQuery。

所以,就可以写出下面的代码:

$('li').each(function(index){
  if(index==2)return true;
  if(index==4)return false;
  $(this).css("border","1px red solid");              
  });

这里会跳过第3、5个li 元素,而不改变其CSS样式。
(index从0开始计算,也可以使用其他的变量名)

四、参考资料
http://blog.csdn.net/JADE_BLACK/archive/2009/08/07/4423928.aspx
http://2007xyz.blogspot.com/2009/03/jquery-eachcontinuebreak.html
Tags:
博爱老头 Homepage
2009/09/10 15:48
不得不说,jQuery改变了设计人员很多。
linuxing 回复于 2009/09/11 10:51
是啊,jQuery确实提供了很大的便利和良好的兼容性,可惜现在还不能完全掌握,正在慢慢学习中。
分页: 1/1 第一页 1 最后页
发表评论
表情
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
打开HTML
打开UBB
打开表情
隐藏
记住我
昵称   密码   游客无需密码
网址   电邮   [注册]