Funcion each() de jquery
Mon Oct 31 2022 16:35:49 GMT+0000 (Coordinated Universal Time)
Saved by @modesto59 #javascript
const colors = [ { 'red': '#f00' }, { 'green': '#0f0' }, { 'blue': '#00f' } ]; $.each(colors, function() { $.each(this, function(name, value) { console.log(`${name} = ${value}`); }); }); This example outputs: red = #f00 green = #0f0 blue = #00f const numbers = [1, 2, 3, 4, 5]; $.each(numbers, function(index, value){ console.log(`${index}: ${value}`); }); This snippet outputs: 0:1 1:2 2:3 3:4 4:5 FUNCION EACH CON CLASES <div class="productDescription">Red</div> <div>Pink</div> <div class="productDescription">Orange</div> <div class="generalDescription">Teal</div> <div class="productDescription">Green</div> $.each($('.productDescription'), function(index, value) { console.log(index + ':' + $(value).text()); }); In this case, the output is: 0:Red 1:Orange 2:Green No tenemos que incluir índice y valor. Estos son solo parámetros que ayudan a determinar en qué elemento DOM estamos iterando actualmente. Además, en este escenario también podemos utilizar el eachmétodo más conveniente. Podemos escribirlo así: $('.productDescription').each(function() { console.log($(this).text()); }); Ahorrar Y obtendremos esto en la consola: Red Orange Green <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>each demo</title> <style> ul { font-size: 18px; margin: 0; } span { color: blue; text-decoration: underline; cursor: pointer; } .example { font-style: italic; } </style> <script src="https://code.jquery.com/jquery-3.5.0.js"></script> </head> <body> To do list: <span>(click here to change)</span> <ul> <li>Eat</li> <li>Sleep</li> <li>Be merry</li> </ul> <script> $( "span" ).click(function() { $( "li" ).each(function() { $( this ).toggleClass( "example" ); }); }); </script> </body> </html> La función each() en jQuery itera a través de objetos y matrices. Las matrices que tienen la propiedad de longitud se recorren desde el índice 0 hasta la longitud-1 y mientras que las matrices como los objetos se recorren a través de sus nombres de propiedades. Sintaxis: $.each('matriz u objeto', función(índice, valor){ // Tu codigo }) <!DOCTYPE html> <html lang="en"> <head> <!-- using jquery library --> <script src= "https://code.jquery.com/jquery-git.js"> </script> </head> <body> <script> let arr = [10, 20, 30, 40, 50]; $.each(arr, function (index, value) { document.write(index + ": " + value + "<br>"); }); </script> </body> </html> FUNCION EACH() UTILIZADA CON ELEMENTO DEL DOM <!DOCTYPE html> <html lang="en"> <head> <!-- using jquery library --> <script src= "https://code.jquery.com/jquery-git.js"> </script> </head> <body> <p>para-1</p> <p>para-2</p> <p>para-3</p> <p>para-4</p> <p>para-5</p> <script> $("p").each(function (index) { console.log(index + ": " + $(this).text()); }); </script> </body> </html>
Comments