jueves, 31 de mayo de 2012

each control de arrays en Jquery



each() es una función de Jquery que permite hacer un recorrido por los elementos de un array o por los elementos del DOM html.


Para iterar en un array ... $.each( Nombre del Array, callback(Index, Valor));

Para iterar en un elemento ... $(elemento).each(callback(Index, Valor));

En el siguiente ejemplo al hacer click sobre el botón se extraerán todos los elementos de un Array, así como el número de elementos del mismo.




El código del ejemplo es el siguiente ...

<!-- By http://jquery-manual.blogspot.com -->
<!DOCTYPE HTML>
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.2.min.js'></script>
<script type="text/javascript">
$(document).ready(function() {
var lenguajes = ["Javascript", "HTML", "CSS", "PHP", "XML"];
$(":button#boton").click(function(){
$("#caja").html("");
$.each(lenguajes, function(index, valor){
$("#caja").append("Index: " + index + " Valor: " + valor + "<br>");
$("#numero").html("Número de Elementos del Array: " + lenguajes.length);
});
});
});
</script>
</head>
<body>
<input type="button" id="boton" value="EACH()">
<div>
<div id="caja"></div>
<div id="numero"></div>
</div>
</body>
</html>