Los ciclos repetitivos nos ayudan a obtener información de forma muy rápida, ya los hemos visto en entradas anteriores con JavaScript Nativo, ahora veamos como podemos recorrer los valores de componentes visuales de HTML como recorrer tablas y listas en jquery haciendo uso de each de JQuery, con el fin de obtener los valores contenidos en ellos y realizar acciones:
Función each de JQuery para recorrer tablas y listas HMTL
Mediante esta función además de recorrer valores podemos ejecutar accione dependiendo el valor encontrado en cada íteración.
Recorriendo todos los valores de una tabla HTML haciendo uso de each JQuery
En el siguiente ejemplo veremos como al pulsar un botón iremos mostrando los valores contenidos en una tabla:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
</head>
<body>
<table style="width:100%" border="1" id="tabla">
<tr>
<th>ID</th>
<th>Nombres</th>
<th>Apellidos</th>
</tr>
<tr>
<td>001</td>
<td>Jhon</td>
<td>Doe</td>
</tr>
<tr>
<td>002</td>
<td>Jackson</td>
<td>Doe</td>
</tr>
<tr>
<td>003</td>
<td>Mary</td>
<td>Doe</td>
</tr>
</table>
<button id="b2">Obtener</button>
</body>
<script>
$("#b2").click(function(){
$("td").each(function(){
console.log($(this).text())
});
});
</script>
</html>
Los valores son mostrados por la consola del navegador, más sin embargo podemos mostrarlos donde deseemos:
Realizando acciones en cada iteración:
Muchas veces deseamos realizar una acción dependiendo el valor que encontramos a medida que vamos iterando, simplemente podemos hacer un condicional o pasar valores a una función, veamos un ejemplo:
<script>
$("#b2").click(function(){
$("td").each(function(){
if($(this).text()=='002'){
return false;
}else{
console.log($(this).text());
}
});
});
</script>
Con el código anterior si encontramos un valor con «002«, retornamos false con lo que nos permite cancelar o salir del each, mostrándonos solamente el primer registro.
Pasando valores a una función:
Si pasamos el valor a una función podemos hacer prácticamente lo que sea con dicho valor y realizar acciones o retornar valores:
<script>
$("#b2").click(function(){
$("td").each(function(){
if(Validar($(this).text())==true){
return false;
}else{
console.log($(this).text());
}
});
});
function Validar(valor) {
if(valor=='002'){
return true;
}else{
return false;
}
}
</script>
Recorriendo Listas HTML
Al igual que las tablas también podemos iterar sobre listas, básicamente sería el mismo proceso:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
</head>
<body>
<ul>
<li>Uvas</li>
<li>Pera</li>
<li>Naranja</li>
<li>Mora</li>
</ul>
<button id="b2">Obtener</button>
</body>
<script>
$("#b2").click(function(){
$("li").each(function(){
console.log($(this).text());
});
});
</script>
</html>