Bucle de jQuery a través de elementos
-
Utilice el método
.each()para recorrer los elementos de la lista -
Use el método
.each()para contar datos de tabla con la misma clase
Para recorrer los elementos HTML, usamos el método .each(). En la inicial de esta función, seleccionamos el árbol de elementos que se necesita recorrer.
Y en el paréntesis del método, sumamos una función que tiene parámetros, el índice y el valor.
En este proceso, el valor que obtenemos está principalmente en el formato text(), también conocido como cadena. Si vamos a tratar con cualquier lista numérica, se buscará como una cadena y luego, según las preferencias, podemos convertirla.
En los siguientes ejemplos, visualizaremos una instancia similar que aclara el concepto del método .each() para iterar elementos.
Utilice el método .each() para recorrer los elementos de la lista
Aquí, estableceremos un ejemplo en el que tenemos una pila de listas. Y centrándonos en el li, realizaremos la iteración.
Entonces, justo antes del método .each(), estableceremos el nombre del elemento de bucle. Y luego agregue una función que tome la cuenta para mantener el índice y los valores.
Vamos a ver cómo funciona.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<title>array loop through</title>
</head>
<body>
<ul id="mylist">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
var sum = 0;
$("li").each(function(index, elem){
sum+=parseInt( $( this ).text(), 10 );
});
console.log("Sum of the li elements: " + sum);
</script>
</div>
</body>
</html>
Producción:
En este ejemplo, tomamos las instancias de li y usamos .each(). Los parámetros index y elem almacenarán los números de índice y el detalle del objeto HTML para cada elemento.
Por lo tanto, será engorroso lidiar con el elem. Así que recuperamos el contenido de li como texto (cadena) y luego lo analizamos en un número entero.
Veremos otro ejemplo que definirá cómo están funcionando los índices.
Use el método .each() para contar datos de tabla con la misma clase
Como ya conocemos la funcionalidad del método .each(), aquí saltaremos directamente al segmento de código para visualizar los resultados.
Fragmento de código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<title>array loop through</title>
</head>
<body>
<table class="tbl" border=2>
<tr>
<td>D1</td>
<td>D2</td>
</tr>
<tr>
<td>D3</td>
<td>D4</td>
</tr>
</table>
<script>
var cnt = 0;
var ar = []
$("td").each(function(index, elem){
$(elem).addClass('table');
});
$(".table").each(function(index, elem){
ar[cnt]=index;
cnt++;
});
console.log("Total data count: " + cnt);
console.log("The indexes: " + ar);
</script>
</div>
</body>
</html>
Producción:
Entonces, el parámetro índice está adquiriendo los valores numéricos y, por lo tanto, obtenemos la cantidad de datos de la tabla y la representación en una matriz.
Además, puede nombrar los mismos datos categorizados en una clase específica tomando el parámetro elem como se muestra a continuación.
$('td').each(function(index, elem) {
$(elem).addClass('table');
});
