Manual de jQuery

Trabajando con elementos en jQuery: Obtención de elementos

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (Ninguna valoración todavía)
Cargando...

En este artículo estudiaremos la obtención de elementos de un conjunto envuelto, analizaremos las funciones get e index.

Una vez que tenemos nuestro conjunto de elementos envueltos mediante la funcionalidad ofrecida por jQuery, es común que el usuario comience a utilizar los comandos y métodos que nos proporciona la librería para poder llevar a cabo algún tipo de operación sobre ellos, como por ejemplo el comando “hide()” que estudiamos en el artículo anterior, el cual se encarga de ocultar todos los elementos de dicho conjunto. Pero también se puede presentar el caso o necesidad, de querer tener en nuestras manos una referencia directa a uno o varios elementos del conjunto envuelto, ya sea para llevar a cabo operaciones con JavaScript nativo sobre ellos, es decir sin utilizar la librería jQuery, o simplemente para hacer uso de algún método de manera especifica.

Debido a jQuery que nos permite tratar al conjunto envuelto de elementos como una matriz simple hecha con JavaScript, podemos utilizar la indexación de arreglos como método para obtener cualquier elemento de la lista envuelta en base a su posición.

Por ejemplo, si queremos obtener el primer elemento que se encuentra envuelto en el conjunto que componen todos los elementos “img” de nuestro documento que tengan el atributo “alt” dentro de su etiqueta, podemos utilizar la siguiente sentencia:

jQuery('img[alt]')[0]

La cual básicamente nos esta indicando con el selector el grupo de elementos que describimos anteriormente y con el número 0 dentro de los corchetes hace llamar al primer elemento de dicho grupo, como comúnmente se hace con la indexación. Si preferimos usar un método en lugar de indexación de matrices, jQuery define y nos ofrece el método “get()” para realizar esta misma operación.

Función get en jQuery

El método “get()” nos ayuda a obtener uno o varios de los elementos que conforman el conjunto obtenido en base a la búsqueda que se realizo proporcionando un selector a la función jQuery. Este método puede recibir un parámetro que lleva por nombre “índice”, dicho parámetro es opcional, si se proporciona el método devolverá únicamente el elemento cuyo índice coincide con el número proporcionado como parámetro, mientras que si no se proporciona el método regresará todos los elementos del conjunto envuelto, acomodados en un arreglo sencillo.

En base a esto podemos estructurar el siguiente fragmento de código:

jQuery('img[alt]').get(0)

El cual sería equivalente al ejemplo que anteriormente hicimos mediante el uso de indexación de matrices.

Como mencionamos en su descripción, el método “get()” también puede ser utilizado para obtener un arreglo de JavasScript que contenga todos los elementos del conjunto envuelto. Supongamos que queremos obtener todos los elementos de tipo botón que se encuentran en nuestro sitio Web, pero dichos elementos deben ser precedidos por una etiqueta establecida en el DOM mediante el código “label”, para ello estructuramos una sentencia como la siguiente:

var botonesEtiquetados = jQuery('label+button').get();

La primera parte de la declaración nos sirve para obtener todos los elementos que coincidan con la descripción hecha en el párrafo anterior, los cuales quedarán envueltos en nuestro contenedor de jQuery para poder aplicarles las operaciones necesarias. Es entonces, que en la segunda parte de la sentencia definida, el comando “get()” se encargará de dividir dicho conjunto en un arreglo de Javascript, el cual finalmente quedará depositado en la variable “botonesEtiquetados”.

Función index

También podemos utilizar una operación inversa para encontrar el índice de un elemento concreto en el conjunto envuelto. Digamos que por alguna razón queremos saber el índice ordinal de una imagen que lleva por id la cadena “holaTarola”, y dicha imagen se encuentra depositada en un conjunto conformado por todas las imágenes de nuestra página. Podemos obtener este valor con una declaración como la siguiente:

var n = $('img').index($('img#holaTarola')[0]);

Como se puede observar utilizamos otra función la cual lleva por nombre “index()”, esta se encarga de encontrar un elemento dentro de un conjunto y devuelve su índice ordinal dentro de éste. Si el elemento que fue buscado no es parte o residente de algún conjunto, entonces el valor que regresará la función será un -1.

La función “index()” recibe un parámetro, el cual sirve para indicar el elemento que queremos buscar dentro del conjunto, dicho parámetro deber ser una referencia al elemento y si no se proporciona no se puede regresar su valor ordinal dentro del conjunto.

Conclusión

Como podemos observar hasta el momento nada de lo estudiado se ha desperdiciado, todo conocimiento adquirido es reutilizado o acomodado de tal manera que podamos realizar nuevas operaciones. Al principio de esta serie de artículos del manual de jQuery mencioné que era muy importante tener conocimientos previos de JavaScript para poder empezar a estudiar un framework. Mencionaba que no podemos volar antes de saber caminar, y este es un claro ejemplo de porque lo dije. El uso de posiciones ordinales e indexación es algo que una vez aprendido en JavaScript nativo es muy fácil de replicar con jQuery.

Ahora que ya sabemos obtener elementos y crear arreglos en base al conjunto envuelto, sigue estudiar la manera en que podemos ajustar el conjunto de elementos envueltos a la manera que deseamos, agregar, quitar, rebanar o cortar, todo lo necesario para obtener el producto realmente deseado.

Deja una respuesta