HOWTO · jQuery
Verwenden Sie die for-Schleife in jQuery
Dieses Tutorial zeigt, wie Sie die for-Schleife in jQuery verwenden.
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:
