jueves, 1 de agosto de 2013

Uso de la función map de Jquery

La función map de Jquery permite iterar mediante un bucle los elementos de un array o lista y manipularlos durante su ejecución, es muy parecida a la función each, con ambas funciones se pueden obtener prácticamente los mismos resultados.

El uso de map es el siguiente ...

$.map(array, function(value, index){});

En el siguiente ejemplo se mostrará dos formas de manipular los elementos de un array mediante map, en el primero el elemento se sumará por si mismo y se hará solamente uso del parámetro value, en el segundo se hará uso de ambos parámetros value e index, para mostrar tanto el index como el value de cada elemento, en cada uno de los ejemplos se utilizará la función join para extraer cada elemento del array separado por comas.

El resultado devuelto por el primer ejemplo será ... 0, 2, 4, 6, 8

El resultado devuelto por el segundo ejemplo será ... 0:uno, 1:dos, 2:tres, 3:cuatro

<!doctype html>
<html>
<head>
<meta>
<title>jQuery.map demo</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<script>
$(function(){
//$.map(array, function(value, index){});

/*Ejemplo 1*/
var lista = [ 0, 1, 2, 3, 4 ];
resultado = $.map(lista, function(val)
{
return val + val;
});
$("#map1").html(resultado.join(", "));

/*Ejemplo 2*/
var lista = [ "uno", "dos", "tres", "cuatro"];
resultado = $.map(lista, function(val, index)
{
return index + ":" + val;
});
$("#map2").html(resultado.join(", "));

});
</script>

<div id="map1"></div>
<div id="map2"></div>

</body>
</html>