Utiliser la boucle for dans jQuery
Bien que jQuery supporte la boucle for, c’est la fonctionnalité du noyau JavaScript. jQuery a une méthode, each(), qui peut parcourir à la fois des tableaux et des objets.
Ce tutoriel montre comment utiliser la boucle for dans jQuery.
Utiliser la boucle for dans jQuery
La méthode each() de jQuery fonctionne de la même manière que la boucle for de JavaScript. La méthode each() peut parcourir des tableaux et des objets.
Tandis que, pour parcourir des objets en JavaScript, nous devons utiliser la boucle for in. Voyons un exemple pour la boucle for de JavaScript :
<!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>
Le code ci-dessus imprimera les membres du tableau en utilisant la boucle for de JavaScript. Voir la sortie :
JavaScript For Loop
Delftstack1
Delftstack2
Delftstack3
Delftstack4
Delftstack5
Delftstack6
La méthode each() peut également effectuer cette opération pour les tableaux et les objets. La syntaxe de la méthode each() est :
.each( function )
La function sera exécutée pour chaque élément correspondant, et la méthode each() est utilisée pour rendre la construction de boucle DOM moins sujette aux erreurs. Il itérera à travers les éléments DOM.
Essayons des exemples pour la méthode each() dans jQuery. Voici un exemple similaire à la boucle for de JavaScript avec la méthode each() de 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>
La sortie pour le code ci-dessus est :
JQuery Each() Method
Delftstack1
Delftstack2
Delftstack3
Delftstack4
Delftstack5
Delftstack6
Voici un autre exemple pour la méthode each() qui itérera sur les éléments div. Voir exemple :
<!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>
Le code ci-dessus parcourra les divs et changera leur couleur au clic. Voir la sortie :
Que se passe-t-il si nous voulons arrêter l’itération à un moment donné de la boucle ? C’est aussi possible avec la méthode jQuery each().
Nous pouvons simplement retourner false à l’itération particulière. Voir exemple :
<!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>
L’exemple de code ci-dessus changera la couleur d’arrière-plan pour tous les div jusqu’à ce qu’un div particulier avec ID vienne dans l’itération. Il s’arrêtera à l’itération donnée.
Voir le résultat :
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