HOWTO · jQuery
在 jQuery 中使用 for 迴圈
本教程演示瞭如何在 jQuery 中使用 for 迴圈。
本頁內容
儘管 jQuery 支援 for 迴圈，但它是 JavaScript 的功能。jQuery 有一個方法，each()，它可以遍歷陣列和物件。
本教程演示瞭如何在 jQuery 中使用 for 迴圈。
在 jQuery 中使用 for 迴圈
jQuery 中的 each() 方法與 JavaScript 的 for 迴圈類似。each() 方法可以遍歷陣列和物件。
同時，要遍歷 JavaScript 中的物件，我們需要使用 for in 迴圈。讓我們看一個 JavaScript 中的 for 迴圈示例：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript For Loop</h2>
<p id="DemoPara"></p>
<script>
const Demo_Array = ["Delftstack1", "Delftstack2", "Delftstack3", "Delftstack4", "Delftstack5", "Delftstack6"];
let Demo_String = "";
for (let i = 0; i < Demo_Array.length; i++) {
Demo_String += Demo_Array[i] + "<br>";
}
document.getElementById("DemoPara").innerHTML = Demo_String;
</script>
</body>
</html>
上面的程式碼將使用 JavaScript 的 for 迴圈列印陣列成員。見輸出：
JavaScript For Loop
Delftstack1
Delftstack2
Delftstack3
Delftstack4
Delftstack5
Delftstack6
each() 方法也可以對陣列和物件執行此操作。each() 方法的語法是：
.each( function )
function 將為每個匹配的元素執行，each() 方法用於使 DOM 迴圈結構更不容易出錯。它將遍歷 DOM 元素。
讓我們嘗試 jQuery 中的 each() 方法的示例。這是一個類似於 JavaScript 的 for 迴圈和 jQuery 的 each() 方法的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Each() Method</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
var Demo_Array = ["Delftstack1", "Delftstack2", "Delftstack3", "Delftstack4", "Delftstack5", "Delftstack6"];
$.each(Demo_Array, function(index, value){
$("#DemoDiv").append(value + '<br>');
});
});
</script>
</head>
<body>
<h2>JQuery Each() Method</h2>
<div id="DemoDiv"></div>
</body>
</html>
上面程式碼的輸出是：
JQuery Each() Method
Delftstack1
Delftstack2
Delftstack3
Delftstack4
Delftstack5
Delftstack6
這是將遍歷 div 元素的 each() 方法的另一個示例。參見示例：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Each() Method</title>
<style>
div {
color: black;
text-align: center;
cursor: pointer;
font-weight: bolder;
width: 500px;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<div>Hello, This is Delftstack</div>
<div>Demo to Iterate Over Divs</div>
<div>Click here to iterate over Divs</div>
<div>Www.delftstack.com</div>
<script>
$( document.body ).click(function() {
$( "div" ).each(function( x ) {
if ( this.style.color !== "lightblue" ) {
this.style.color = "lightblue";
}
else {
this.style.color = "green";
}
});
});
</script>
</body>
</html>
上面的程式碼將遍歷 divs 並在點選時更改它們的顏色。見輸出：
如果我們想在迴圈中的某個點停止迭代怎麼辦？這也可以通過 jQuery each() 方法實現。
我們可以在特定的迭代中返回 false。參見示例：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Each Method</title>
<style>
div {
width: 50px;
height: 50px;
margin: 10px;
float: left;
border: 4px blue solid;
text-align: center;
}
span {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="StopChanging"></div>
<div></div>
<div></div>
<div></div>
<h2></h2>
<button>Click here to Change Colors</button>
<script>
$( "button" ).click(function() {
$( "div" ).each(function( DivIndex, DivElement ) {
$( DivElement ).css( "backgroundColor", "lightblue" );
if ( $( this ).is( "#StopChanging" ) ) {
$( "h2" ).text( "Stopped at div number #" + DivIndex );
$( "#StopChanging" ).text( "STOP" );
return false;
}
});
});
</script>
</body>
</html>
上面的示例程式碼將更改所有 div 的背景顏色，直到迭代中出現具有 ID 的特定 div。它將在給定的迭代處停止。
見輸出：
