在 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。它將在給定的迭代處停止。
見輸出：
Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.
LinkedIn Facebook