Asignación de valores a atributos en jQuery

Explicamos como asignar valores a los atributos relacionados a los elementos que forman parte del conjunto combinado, todo esto con jQuery.

Como pudimos ver en el artículo anterior, la función “attr()” fue muy efectiva al momento de obtener valores de elementos que conforman un conjunto envuelto, esto nos permitió realizar operaciones y simplificar el código, pero como fue aclarado en ese mismo artículo su funcionalidad no se ve limitada únicamente a la obtención, puesto que también nos ayuda a asignar valores.

Primer variante

Existen dos maneras distintas de definir los atributos correspondientes a los elementos envueltos en un conjunto establecido con jQuery. Comenzaremos este artículo analizando a el más directo de los dos, dicho método nos permite establecer un único atributo a la vez para todos los elementos envueltos en el conjunto, y en su sintaxis nos indica que recibe dos parámetros, necesarios para regresarnos el conjunto con los nuevos valores que fueron proporcionados.

Dichos parámetros reciben los alias de “nombre” y “valor”, el primero de ellos debe ser una cadena que indique el nombre del atributo que sea desea ajustar, mientras que el segundo puede ser una cadena, un objeto o una función que sirva para especificar el nuevo valor dicho atributo, es por ello que puede ser cualquier expresión que regrese un valor. Esta variante de “attr()”, que al principio puede parecer simple, es bastante sofisticada en su funcionamiento.

En su forma más básica, cuando el parámetro de valor es cualquier expresión JavaScript que se traduce en un valor (incluyendo a los arreglos), el valor calculado de la expresión se establece como valor del atributo.

Las cosas se ponen más interesantes cuando el valor del parámetro es una referencia de función. En tales casos, se invoca la función para cada elemento del conjunto envuelto y el valor devuelto de la función es el que se utiliza como valor del atributo. Cuando se invoca la función, se pasa un único parámetro que contiene el índice de base cero indicando la posición del elemento dentro del conjunto envuelto. Además, el elemento se establece como la variable “this” en la invocación de la función, lo que le permite ajustar el manejo de cada elemento en específico.

Considere la siguiente declaración:

jQuery('*').attr('title',function(index) {
    return 'Yo soy el elemento #' + index + ' y mi ID es ' + (this.id ? this.id : 'unset');
});

Este comando se se encargará de recorrer todos los elementos de la página, estableciendo como atributo de título en cada uno de ellos la cadena proporcionada, la cual se encuentra compuesta por el índice del elemento en el DOM y el atributo id de cada elemento específico.

Vamos a utilizar este medio para especificar el valor del atributo siempre que el valor dependa de otros aspectos de los elementos. También podemos hacer uso de la segunda variante de la función “attr()” que nos permite especificar convenientemente varios atributos a la vez.

Segunda variante

Esta segunda variante establece los atributos y valores especificados por el objeto que se pasa, en todos los elementos del conjunto combinado. Como ya se menciono recibe únicamente un parámetro, el cual es un objeto cuyas propiedades se copian como atributos, y al final nos regresa un conjunto con los nuevos valores.

Este formato es una forma rápida y fácil de configurar varios atributos en todos los elementos de un conjunto envuelto. El parámetro que se pasa puede ser cualquier referencia a un objeto, con propiedades que especifiquen los nombres y valores de los atributos que desea ajustar. Si consideramos el siguiente código:

jQuery ('input'). attr (
    { value: '', title: 'Por favor, introduzca un valor'}
);

Esta declaración establece que el valor de todos los elementos “input” será una cadena vacía, y al mismo tiempo establece que el título de dichos elementos será la cadena “Por favor, introduzca un valor”.

Hay que tener en cuenta que si cualquier propiedad en el objeto que se pasa como parámetro de valor, es una referencia de función, esta variante de la función “attr” va a opera de manera similar a la descrita para el formato anterior, se invoca la función para cada elemento individual que componga el conjunto.

Ahora sabemos cómo obtener y establecer los atributos. Pero ¿qué hay de cómo deshacerse de ellos? en el próximo artículo estudiaremos las maneras de hacerlo.