Verwenden Sie die for-Schleife in jQuery
Obwohl jQuery die for-Schleife unterstützt, ist es die Funktionalität von Kern-JavaScript. jQuery hat eine Methode, each(), die sowohl Arrays als auch Objekte durchlaufen kann.
Dieses Tutorial zeigt, wie Sie die for-Schleife in jQuery verwenden.
Verwenden Sie die for-Schleife in jQuery
Die Methode each() in jQuery funktioniert ähnlich wie die for-Schleife von JavaScript. Die Methode each() kann Arrays und Objekte durchlaufen.
Um Objekte in JavaScript zu durchlaufen, müssen wir die for in-Schleife verwenden. Sehen wir uns ein Beispiel für die for-Schleife von JavaScript an:
<!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>
Der obige Code druckt die Array-Mitglieder unter Verwendung der for-Schleife von JavaScript. Siehe Ausgabe:
JavaScript For Loop
Delftstack1
Delftstack2
Delftstack3
Delftstack4
Delftstack5
Delftstack6
Die Methode each() kann diese Operation auch für Arrays und Objekte ausführen. Die Syntax für die Methode each() lautet:
.each( function )
Die Funktion wird für jedes übereinstimmende Element ausgeführt, und die Methode each() wird verwendet, um das DOM-Schleifenkonstrukt weniger fehleranfällig zu machen. Es wird die DOM-Elemente durchlaufen.
Lassen Sie uns Beispiele für die Methode each() in jQuery ausprobieren. Hier ist ein ähnliches Beispiel wie die for-Schleife von JavaScript mit der each()-Methode von jQuery:
<!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>
Die Ausgabe für den obigen Code lautet:
JQuery Each() Method
Delftstack1
Delftstack2
Delftstack3
Delftstack4
Delftstack5
Delftstack6
Hier ist ein weiteres Beispiel für die each()-Methode, die über die div-Elemente iteriert. Siehe Beispiel:
<!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>
Der obige Code durchläuft divs und ändert ihre Farbe beim Klicken. Siehe Ausgabe:
Was ist, wenn wir die Iteration irgendwann in der Schleife stoppen wollen? Das ist auch mit der jQuery-Methode each() möglich.
Wir können bei der jeweiligen Iteration einfach false zurückgeben. Siehe Beispiel:
<!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>
Der obige Beispielcode ändert die Hintergrundfarbe für alle div, bis ein bestimmtes div mit ID in die Iteration kommt. Es stoppt bei der angegebenen Iteration.
Siehe Ausgabe:
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