Usa el bucle for en jQuery
Aunque jQuery admite el bucle for, es la funcionalidad del núcleo de JavaScript. jQuery tiene un método, each(), que puede iterar a través de arrays y objetos.
Este tutorial demuestra cómo usar el bucle for en jQuery.
Usar el bucle for en jQuery
El método each() en jQuery funciona de forma similar al bucle for de JavaScript. El método each() puede iterar a través de arrays y objetos.
Mientras que, para iterar a través de objetos en JavaScript, necesitamos usar el bucle for in. Veamos un ejemplo del bucle 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>
El código anterior imprimirá los miembros del array utilizando el bucle for de JavaScript. Ver salida:
JavaScript For Loop
Delftstack1
Delftstack2
Delftstack3
Delftstack4
Delftstack5
Delftstack6
El método each() también puede realizar esta operación tanto para arrays como para objetos. La sintaxis del método each() es:
.each( function )
La función function se ejecutará para cada elemento coincidente, y el método each() se utiliza para hacer que la construcción de bucle DOM sea menos propensa a errores. Iterará a través de los elementos DOM.
Probemos ejemplos para el método each() en jQuery. Aquí hay un ejemplo similar al bucle for de JavaScript con el método 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 salida para el código anterior es:
JQuery Each() Method
Delftstack1
Delftstack2
Delftstack3
Delftstack4
Delftstack5
Delftstack6
Aquí hay otro ejemplo para el método each() que iterará sobre los elementos div. Ver ejemplo:
<!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>
El código anterior iterará a través de divs y cambiará su color al hacer clic. Ver salida:
¿Qué sucede si queremos detener la iteración en algún punto del bucle? Eso también es posible con el método jQuery each().
Simplemente podemos devolver false en la iteración particular. Ver ejemplo:
<!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>
El código de ejemplo anterior cambiará el color de fondo para todos los div hasta que aparezca un div particular con ID en la iteración. Se detendrá en la iteración dada.
Ver salida:
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