Utilizando JQuery data con objetos JavaScript

Todos seguimos usando JQuery mucho hoy en día en nuestros proyectos aunque poco a poco los frameworks MVC de JavaScript absorben proyectos. Una de las funcionalidades más útiles es jQuery data que nos permite asignar datos a un nodo de DOM para su posterior utilización. Vamos a ver un ejemplo sencillo, para ello partiremos de un array de datos que asignaremos a un conjunto de párrafos.

Una vez asignados a los párrafos estos podrán acceder a la información almacenada de forma directa. Vamos a ver el código fuente:


<html>
<head>
<script src="jquery-1.11.1.js"></script>
<script type="text/javascript">

 $(document).ready(function() {

 var i=0;
 var productos=[{"concepto":"producto1","importe":400},
 {"concepto":"producto2","importe":600},{"concepto":"producto3","importe":800}]

 $("p").each(function() {

 $(this).data("producto",productos[i]);
 i++;
 })

 $("p").click(function() {

 $("#detalle").text($(this).data("producto").importe);

 });

 });

</script>
</head>
<body>

<p>producto1</p>
<p>producto2</p>
<p>producto3</p>

<div id="detalle">

</div>

</body>
</html>

jQuery Data

Como podemos ver usamos jQuery data para recorrer los párrafos y asignarles un item del array . De esta forma cada vez que pulsamos en un párrafo podemos ver el importe en el div de detalle.

jQuery.data() es un método que nos puede ayudar sobremanera a simplificar el desarrollo de nuestras aplicaciones aportandonos datos de forma directa en las zonas que tenemos que manipular.

Otros artículos relacionados: jQuery Context , jQuery Ajax , HTML5 data Atributes

Descargar PDF