Preview:
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>
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter