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