jQuery - 函式 $().each() 的迴圈控制

襲冷發表於2014-04-21
jQuery函式

一、關於

    1、使用jQuery的each函式時，實現如同java中for迴圈的中斷(break)和跳過(continue) 操作

    2、準備測試的Html文件

<html>
<head>
<title>Test jQuery Each</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
	<p><button id="tb">Test Break</button><button id="tc">Test Continue</button></p>
	<ul>
		<li>AAA</li>
		<li>BBB</li>
		<li>CCC</li>
		<li>DDD</li>
	</ul>
</body>
</html>
二、中斷

    1、指令碼

<script type="text/javascript">
	$(document).ready(function() {
		$("#tb").click(function() {
			$("li").each(function() {
				if($(this).text() == "CCC"){
					//中斷這個迴圈
					return false;
				}
				$(this).css("color","red");
			});
		});
	});
</script>

    2、結果

        
三、跳過

    1、指令碼

<script type="text/javascript">
	$(document).ready(function() {
		$("#tc").click(function() {
			$("li").each(function() {
				if($(this).text() == "CCC"){
					//跳過本次迴圈
					return true;
				}
				$(this).css("color","red");
			});
		});
	});
</script>
    2、結果

        

 

  
 

相關文章