Learning to design, Mr. McFly

Método data()

Este método del objeto jQuery sirve tanto para guardar un dato en un elemento como para consultarlo. Según el número de parámetros que reciba, realiza una u otra acción.

Si recibe un parámetro data(nombre): devuelve el valor que haya en el dato cuyo nombre se pasa por parámetro.
Si recibe dos parámetros data(nombre, valor): almacena un dato, cuyo nombre recibe en el primer parámetro, con el valor que recibe en el segundo parámetro.

Como data() es un método que pertenece al objeto jQuery, podemos almacenar estos pares (dato, valor) en cualquiera de los elementos que seleccionemos con la función jQuery().

Veamos un caso de uso simple. Por ejemplo tenemos un elemento de la página como este:

<div id="capa">
En esta división (elemento id="capa") voy a guardar y leer
datos sobre este elemento.
</div>

Ahora podríamos usar le método data() de la siguiente manera:

$("#capa").data("midato","mivalor");

Con esta línea hemos guardado un dato llamado "midato" con el valor "mivalor", en el elemento con identificador (atributo id) "capa".

Ahora podríamos leer ese dato en cualquier momento para acceder a su valor, de la siguiente manera:

alert($("#capa").data("midato"));

En esta línea de código extraemos el dato "midato" del elemento con identificador "capa" y lo mostramos en una caja de alerta.

Podemos ver una página en marcha que hace uso de esas dos funciones.

Método removeData()

Este método sirve para eliminar un dato de un elemento y su funcionamiento es tan simple como enviar por parámetro el dato que se quiere eliminar del elemento.

$("#capa").removeData("midato")

Con esta línea habríamos eliminado el dato llamado "midato" del elemento con identificador "capa".

Ejemplo completo de los métodos data() y removeData() del Core de jQuery

Veamos un ejemplo completo del uso de estos métodos que acabamos de aprender. Se trata de una página que tiene un elemento sobre el que vamos a guardar datos. Además tiene tres botones para guardar un dato, leerlo y borrarlo. El dato que se guardará tendrá como valor lo que se haya escrito en un campo de texto que aparece también en la página.

Podemos ver el ejemplo en marcha en una página aparte.

Tenemos, para comenzar, un elemento de la página, que es donde vamos a guardar los pares dato-valor con data().

<div id="division">
En esta división (elemento id="division") voy a guardar
datos con la función data y luego los voy
a leer.
</div>

Luego tendremos este formulario, que contiene el campo de texto así como los tres botones de los que hemos hablado.

<form name="formul">
Escribe un valor a guardar, leer o eliminar:
<input type="text" name="valor" id="valor">
<br>
<input type="button" value="guardar dato" id="guardar">
<input type="button" value="leer dato" id="leer">
<input type="button" value="eliminar dato" id="eliminar">
</form>

Ahora se trata de asignar los comportamientos a estos botones con Javascript, haciendo uso de jQuery.

Este sería el script para agregar el evento click al botón de guardar datos.

$("#guardar").click(function(evento){
var valor = document.formul.valor.value;
//Esta misma línea de código se puede codificar así
también con jQuery
//var valor = $("#valor").attr("value");
$("#division").data("midato",valor);
$("#division").html('He guardado en este elemento (
id="division") un dato llamado "midato" con el valor "'
+ valor + '"');
});

Como se puede ver, primero se recibe el texto del campo de texto que había en el formulario. Para ello se muestran dos maneras de hacerlo:

A través de la jerarquía de objetos del navegador, con document.formul.valor.value
A través de su identificador, con un método de jQuery llamado attr() que sirve para recuperar el valor de un atributo HTML pasado por parámetro sobre el elemento que recibe el método. Este modo de obtener el atributo value del campo de texto está comentado, pues sólo lo quería señalar, para que se vea el modo de acceder a un elemento de formulario utilizando las funciones del framework Javascript jQuery.

Luego, se guarda el dato "midato" con el valor que se recuperó del atributo value del campo de texto. Para ello utilizamos el método data() tal como comentábamos.

Por último se muestra un mensaje en el HTML del elemento con id="division", por medio del método html() de jQuery, para informar sobre la acción que acabamos de realizar.

Ahora mostramos el código para asignar un comportamiento al evento click sobre el segundo botón:

$("#leer").click(function(evento){
valor = $("#division").data("midato");
$("#division").html('En este elemento (id="division") leo
un dato llamado "midato" con el valor "' + valor + '"');
});

Como se puede ver, se recupera el valor del dato "midato" guardado sobre el elemento "#division" (etiqueta HTML con id="division"), y se almacena en una variable. Luego se crea un mensaje para mostrar el valor del dato.

Para acabar, tenemos el código del evento click sobre el botón de eliminar el contenido de un dato, que hace uso de removeData().

$("#eliminar").click(function(evento){
$("#division").removeData("midato");
$("#division").html('Acabo de eliminar del elemento (
id="division") el dato llamado "midato"');
});

Como se verá, el método removeData() se invoca sobre el elemento que tiene el dato que pretendemos eliminar. Más tarde se muestra un mensaje informando sobre la acción que se ha realizado.

Para comprobar el funcionamiento de estos métodos habría que crear un dato, escribiendo el valor en el campo de texto y pulsando el botón "guardar dato". Luego podríamos leer ese dato con el botón "leer dato".

Por último podríamos eliminar el dato con el botón "eliminar dato". Si, una vez eliminado pulsamos sobre el botón de "leer dato" veremos que el valor del dato aparece como "undefined", puesto que ese dato ha sido borrado (esto también ocurre si no se ha guardado ningún dato todavía, por ejemplo cuando se acaba de cargar la página).

Sería interesante ver el código fuente completo de esta página, para hacernos una idea más exacta de cómo se integrarían todos estos elementos.

<html>
<head>
<title>Ejemplos de uso de la función data del core de
jQuery</title>
<script src="../jquery-1.3.2.min.js"
type="text/javascript"></script>
<script>
$(document).ready(function(){

$("#guardar").click(function(evento){
var valor = document.formul.valor.value;
//Esta misma línea de código se puede codificar así
también con jQuery
//var valor = $("#valor").attr("value");
$("#division").data("midato",valor);
$("#division").html('He guardado en este elemento (
id="division") un dato llamado "midato" con el valor
"' + valor + '"');
});

$("#leer").click(function(evento){
valor = $("#division").data("midato");
$("#division").html('En este elemento (id="division")
leo un dato llamado "midato" con el valor "' + valor
+ '"');
});

$("#eliminar").click(function(evento){
$("#division").removeData("midato");
$("#division").html('Acabo de eliminar del elemento (
id="division") el dato llamado "midato"');
});
});
</script>
</head>

<body>

<div id="division">
En esta división (elemento id="division") voy a guardar
datos con la función data y luego los voy
a leer
</div>
<br>
<form name="formul">
Escribe un valor a guardar, leer o eliminar:
<input type="text" name="valor" id="valor">
<br>
<input type="button" value="guardar dato" id="guardar">
<input type="button" value="leer dato" id="leer">
<input type="button" value="eliminar dato" id="eliminar">
</form>

</body>
</html>

Admite cualquier tipo de dato

Podemos guardar lo que deseemos por medio del método data(). Los ejemplos anteriores hemos guardado simplemente cadenas de texto, pero soportaría cualquier tipo de variable, numérica, un array o incluso un objeto Javascript o jQuery.

Se guarda un dato por cada elemento del objeto jQuery selecionado

En caso que en el objeto jQuery sobre el que estemos almacenando cosas con data() haya referencias a varios elementos de la página, el dato se almacena en todos los elementos. (recordemos que, según lo explicado anteriormente en desarrolloweb.com, un objeto jQuery puede tener seleccionados varios elementos de la página, como todos los enlaces presentes, los elementos de una determinada clase CSS, etc. dependiendo del selector escogido al hacer uso de la función dólar)

Los objetos se almacenan por referencia

En el caso que estemos almacenando un objeto Javascript con data() sobre uno o varios elementos, no se copia el objeto, sino que se asigna por referencia. Esto quiere decir que no se harían copias independientes del objeto a guardar, sino que permanecería tal cual y lo que se asignaría como dato es una referencia a ese único objeto.

Ahora, para investigar un poco sobre estas posibilidades, hemos creado un par de ejemplos un poco más complejos que hacen uso de los métodos data() y removeData(). Son ejemplos más avanzados, que hacen uso de algunas cosas que no hemos explicado todavía en este manual de jQuery. No obstante, vendrá bien verlos para aprender algunos usos de estas funcionalidades.

Para empezar, quiero mostrar una página de ejemplo donde existen tres enlaces y dos botones. Al pulsar cualquiera de los enlaces mostraremos el contenido de un dato almacenado en ellos con data(). Los botones, por su parte, servirán para almacenar contenidos en datos sobre esos enlaces. Además tendremos una capa con id="mensaje" que nos servirá para mostrar cosas por pantalla.

Podemos ver el ejemplo en marcha en una página aparte.

El código de los elementos HTML será el siguiente:

<a href="#" id="enlace1">Enlace 1</a>
<br>
<a href="#" id="enlace2">Enlace 2</a>
<br>
<a href="#" id="enlace3">Enlace 3</a>
<br>
<br>
<div id="mensaje">
Mensaje...
</div>
<br>
<button id="guardar">guardar "midato" con valor "mivalor" en
todos los enlaces</button>
<br>
<button id="guardarenlace1">guardar "midato" con valor "otro
valor" en el enlace 1</button>

Ahora veamos cómo aplicar eventos a los elementos de la página, para almacenar datos y mostrarlos.
Comencemos por el código de los eventos de los botones.

$("#guardar").click(function(evento){
$("a").data("midato","mivalor");
$("#mensaje").html('He guardado en todos los enlaces un
dato llamado "midato" con el valor "mivalor"');
});

Con este código estamos almacenando datos en todos los enlaces. Cabe fijarse que con la función jQuery $("a") obtenemos un objeto jQuery donde están todos los enlaces de la página. Luego, al invocar data() sobre ese objeto, estamos almacenado ese dato en todos los enlaces existentes.

$("#guardarenlace1").click(function(evento){
$("#enlace1").data("midato","otro valor");
$("#mensaje").html('He guardado en el enlace1 un dato
llamado "midato" con el valor "otro valor"');
});

En este otro código del evento click para el segundo botón, almacenamos "otro valor" sobre el dato de antes, pero sólo lo hacemos sobre el enlace 1, dado que hemos utilizado el selector $("#enlace1"), con el identificador único del primer enlace.
Y ahora podríamos ver el código para asignar un evento a todos los enlaces, para que al pulsarlos nos muestre lo que haya en el dato almacenado con data(), si es que hay algo.

$("a").click(function(evento){
evento.preventDefault();
valorAlmacenado = $(this).data("midato");
$("#mensaje").html("En el enlace <b>" + $(this).attr("id")
+ "</b> tiene el dato 'midato' como " + valorAlmacenado)
;
});

Como se puede ver, estamos creando un evento click, pero lo estamos haciendo sobre los tres enlaces que hay en la página a la vez, dado el selector utilizado en la función jQuery $("a"). Luego el código del evento será el mismo para los tres enlaces.
Lo primero que se hace es un evento.preventDefault() que permite que el enlace no tenga el comportamiento típico (ir a la URL del href).

A continuación hacemos:

valorAlmacenado = $(this).data("midato");

Como se puede ver, se está extrayendo el valor almacenado en el enlace actual, que recibe el evento. Con $(this) obtenemos el objeto jQuery del elemento que ha recibido el evento, que es el enlace sobre el que se ha pulsado y no todos los enlaces. Con el método data("midato"), invocado sobre $(this), obtenemos el valor del dato "midato" almacenado en el enlace que fue pulsado solamente.
Luego se muestra un mensaje para indicar el valor que había en el dato. Pero claro, este código, como es común para todos los enlaces, tiene que acceder también a $(this) para saber qué enlace en concreto fue el que se pulsó. Para identificar el enlace se hace $(this).attr("id"), que devuelve el atributo "id" del enlace sobre el que se hizo clic.
A continuación se puede ver el código completo de esta página.

<html>
<head>
<title>Ejemplos de uso de la función data del core de
jQuery</title>
<script src="../jquery-1.3.2.min.js"
type="text/javascript"></script>
<script>
$(document).ready(function(){

$("a").click(function(evento){
evento.preventDefault();
valorAlmacenado = $(this).data("midato");
$("#mensaje").html("En el enlace <b>" + $(this).attr(
"id") + "</b> tiene el dato 'midato' como " +
valorAlmacenado);
});

$("#guardar").click(function(evento){
$("a").data("midato","mivalor");
$("#mensaje").html('He guardado en todos los enlaces
un dato llamado "midato" con el valor "mivalor"');
});

$("#guardarenlace1").click(function(evento){
$("#enlace1").data("midato","otro valor");
$("#mensaje").html('He guardado en el enlace1 un dato
llamado "midato" con el valor "otro valor"');
});
});
</script>
</head>

<body>

<a href="#" id="enlace1">Enlace 1</a>
<br>
<a href="#" id="enlace2">Enlace 2</a>
<br>
<a href="#" id="enlace3">Enlace 3</a>
<br>
<br>
<div id="mensaje">
Mensaje...
</div>
<br>
<button id="guardar">guardar "midato" con valor "mivalor" en
todos los enlaces</button>
<br>
<button id="guardarenlace1">guardar "midato" con valor "otro
valor" en el enlace 1</button>

</body>
</html>

Si se desea, se puede ver el ejemplo en marcha en una página aparte. ht

Datos de tipo objeto asignados por referencia con data()

Sobre el punto que comentábamos antes, sobre los objetos Javascript que se asignan por medio de data(), que siempre se hace por referencia, hemos creado otro ejemplo, del que simplemente vamos a colocar un enlace para verlo en funcionamiento y su código. http://www.desarrolloweb.com/articulos/ejemplos/jquery/core/data3.html El ejemplo es bastante similar al anterior, con la salvedad que se ha creado un par de acciones adicionales para almacenar en los elementos variables de tipo objeto.
Luego, al operar sobre esos datos de tipo objeto, comprobamos que en realidad sólo existe un objeto compartido por todos los elementos a los que fue asignado. Es decir, no se hicieron copias del objeto, sino que se asignaron en los datos simplemente su referencia.

Puede verse este ejemplo en marcha en una página aparte.

El código completo se puede ver a continuación.

<html>
<head>
<title>Ejemplos de uso de la función data del core de
jQuery</title>
<script src="../jquery-1.3.2.min.js"
type="text/javascript"></script>
<script>
$(document).ready(function(){

$("a.enlacealmacenar").click(function(evento){
evento.preventDefault();
var valorAlmacenado = $(this).data("midato");
var mensaje = "En el enlace <b>" + $(this).attr("id") +
"</b> tiene el dato 'midato' como " +
valorAlmacenado;
var valorAlmacenado2 = $(this).data("miobjeto");
mensaje += "<br>Además, he leído un dato llamado
'miobjeto' con valor " + valorAlmacenado2;
$("#mensaje").html(mensaje);
});

$("#guardar").click(function(evento){
evento.preventDefault();
$("a").data("midato","mivalor");
$("#mensaje").html('He guardado en todos los enlaces
un dato llamado "midato" con el valor "mivalor"');
});

$("#guardarenlace1").click(function(evento){
evento.preventDefault();
$("#enlace1").data("midato","otro valor");
$("#mensaje").html('He guardado en el enlace1 un dato
llamado "midato" con el valor "otro valor"');
});

$("#guardarobjeto").click(function(evento){
evento.preventDefault();
$("a").data("miobjeto",$("#capapruebas"));
$("#mensaje").html('He guardado todos los enlaces un
dato llamado "miobjeto" con el valor un objeto que
es el objeto jquery de seleccionar la capa con id
"capapruebas"');
});

$("#operarobjetoenlace1").click(function(evento){
evento.preventDefault();
$("#enlace1").data("miobjeto").html("cambio el html
del objeto que hay en el dato 'miobjeto' del
'enlace1'");
});

$("#operarobjetoenlace2").click(function(evento){
evento.preventDefault();
$("#mensaje").html("Este es el HTML que hay en el
objeto asociado a enlace2 en el dato 'miobjeto':<br>
" + $("#enlace2").data("miobjeto").html());
});

});
</script>
</head>

<body>

<a href="#" id="enlace1" class="enlacealmacenar">Enlace 1</a>
<br>
<a href="#" id="enlace2" class="enlacealmacenar">Enlace 2</a>
<br>
<a href="#" id="enlace3" class="enlacealmacenar">Enlace 3</a>
<br>
<br>
<div id="mensaje">
Mensaje...
</div>
<br>

<ol style="line-height: 200%;">
<li>
<a id="guardar" href="#">guardar "midato" con valor
"mivalor" en todos los enlaces</a>
</li>
<li>
<a id="guardarenlace1" href="#">guardar "midato" con valor
"otro valor" en el enlace 1</a>
</li>
<li>
<a id="guardarobjeto" href="#">guardar "miobjeto" con una
referencia a la capa de pruebas</a>
</li>
<li style="line-height: 100%;">
<a id="operarobjetoenlace1" href="#">Recuperar un objeto del
enlace1 para hacer cosas con él
<SPAN style="font-size: 8pt; font-weight: bold">
PULSAR ESTE ENLACE SÓLO DESPUÉS DE HABER ALMACENADO EL
OBJETO EN LOS ENLACES POR MEDIO DEL ENLACE DE ESTA LISTA
MARCADO COMO 3)
</SPAN>
</a></li>
<li style="line-height: 100%;">
<a id="operarobjetoenlace2" href="#">Recuperar un objeto del
enlace2 para hacer cosas con él
<SPAN style="font-size: 8pt; font-weight: bold">
PULSAR ESTE ENLACE SÓLO DESPUÉS DE HABER ALMACENADO EL
OBJETO EN LOS ENLACES POR MEDIO DEL ENLACE DE ESTA LISTA
MARCADO COMO 3)
</SPAN>
</a></li>
</ol>
<br>
<br>

<div id="capapruebas">
Este es el texto de una capa de pruebas... con id="capaprueba
s"
</div>

</body>
</html>

Desarrollo Web

- JQUERY

Método each: iteraciones

Cómo funciona

Each es un método que se utiliza sobre un conjunto de elementos que hayamos seleccionado con la función jQuery. Con each realizamos una iteración por todos los elementos del DOM que se hayan seleccionado.

El método each recibe una función que es la que se tiene que ejecutar para cada elemento y dentro de esa función con la variable "this" tenemos una referencia a ese elemento del DOM. Adicionalmente, la función que se envía a each, puede recibir un parámetro que es el índice actual sobre el que se está iterando.

Por ejemplo, veamos esta línea de código:

$("p").css("background-color", "#eee");

Como ya sabemos, con $("p") seleccionamos todos los párrafos de la página. Luego con el método CSS asignamos un estilo, en este caso para cambiar el color del fondo. Esto en realidad jQuery lo hace con una iteración con todos los párrafos de la página, sin que tengamos que hacer nosotros nada más y es genial que se permita en el uso del framework. ¿Pero qué pasa si queremos cambiar el fondo de los párrafos utilizando colores alternos?

En este caso no podemos hacerlo en una sola línea de código, pero each nos vendrá como anillo al dedo.

Imaginemos que tenemos una serie de párrafos en la página y queremos cambiar el color de fondo a los mismos, de manera que tengan colores alternos, para hacer dinámicamente un típico diseño para los listados.

Entonces podríamos hacer lo siguiente:

$("p").each(function(i){
if(i%2==0){
$(this).css("background-color", "#eee");
}else{
$(this).css("background-color", "#ccc");
}
});

Con $("p") tengo todos los párrafos. Ahora con each puedo recorrerlos uno a uno. Para cada uno ejecutaremos la función que enviamos como parámetro a each(). En esa función recibo como parámetro una variable "i" que contiene el índice actual sobre el que estoy iterando.

Con if(i%2==0) estoy viendo si el entero del índice "i" es par o impar. Siendo par coloco un color de fondo al elemento y siendo impar coloco otro color de fondo.

Como se puede ver, con la variable "this" tenemos acceso al elemento actual. Pero OJO, que este elemento no es un objeto jQuery, así que no podríamos enviarle métodos del framework jQuery hasta que no lo expandamos con la función jQuery. Así pues, tenemos que hacer $(this) para poder invocar al método css().

Por si no queda claro este punto mirar las diferencias entre estas dos líneas de código:

this.css("background-color", "#ccc");
$(this).css("background-color", "#ccc");

En la primera línea no estaríamos extendiendo la variable this con las funcionalidades de jQuery, luego no funcionaría.

En la segunda línea, que es la que habíamos utilizado en el script de ejemplo, sí estamos extendiendo la variable "this" con la función jQuery. De ese modo, se puede invocar a cualquier método de jQuery sobre los elementos.

Podemos ver un ejemplo en marcha que hace uso de ese script.

Este sería su código fuente completo:

<html>
<head>
<title>each del core de jQuery</title>
<script src="../jquery-1.3.2.min.js"
type="text/javascript"></script>
<script>
$(document).ready(function(){
$("p").each(function(i){
if(i%2==0){
$(this).css("background-color", "#eee");
}else{
$(this).css("background-color", "#ccc");
}
});
});
</script>
</head>
<body>
<p>Primer párrafo</p>
<p>Otro párrafo</p>
<p>Tecer párrafo</p>
<p>Uno más</p>
<p>y acabo...</p>
</body>
</html>

Retornando valores en la función que enviamos a each

Ahora vamos a ver un par de posibilidades interesantes al utilizar each. Resulta que la función que enviamos como parámetro a each() puede devolver valores y dependiendo de éstos, conseguir comportamientos parecidos a los conocidos break o continue de los bucles Javascript.

Si la función devuelve "false", se consigue detener por completo el proceso de iteraciones de each(). Esto es como si hiciéramos el típico "break".

Si la función devuelve "true", se consigue pasar directamente a la próxima iteración del bucle. Es como hacer el típico "continue".

Para ver estos dos casos realizaremos otro ejemplo de uso de each.

Tenemos varios DIV, donde cada uno tiene un texto.

<div>red</div>
<div>blue</div>
<div>red</div>
<div>white</div>
<div>red</div>
<div>green</div>
<div>orange</div>
<div>red</div>
<div>nada</div>
<div>red</div>
<div>blue</div>

Ahora queremos hacer un recorrido a esos DIV y en cada uno, mirar el texto que aparece. Entonces colocaremos como color del texto del DIV el color que aprece escrito en el DIV. Pero con dos casos especiales:

Si el texto del DIV es "white", entonces no queremos hacer nada con ese elemento.
Si el texto del DIV es "nada", entonces detendremos el bucle y dejaremos de colorear los siguientes elementos.

Esto lo podríamos hacer con el siguiente código:

$("div").each(function(i){
elemento = $(this);
if(elemento.html() == "white")
return true;
if(elemento.html() == "nada")
return false;
elemento.css("color", elemento.html());
});

Ahora podremos ver este ejemplo en funcionamiento en una página aparte.

Desarrollo Web

Learning to design, Mr. McFly

prueba

Redirigir a otra página

Método .toggle()

Método data()

Datos de tipo objeto asignados por referencia con data()

Método each: iteraciones

Páginas vistas en total

Entradas

Videotutoriales

+Cosas

Utilidades

Menú

Manuales

Javascript

Enlaces