Trabajando con elementos en jQuery: El conjunto envuelto

Empezamos a trabajar con el conjunto envuelto de elementos y sus propiedades

Cuando hablamos de un conjunto envuelto en jQuery nos estamos refiriendo a todos aquellos elementos que han resultado de la búsqueda y creación de segmentos en el DOM de nuestro sitio. Dicho conjunto rastreado, es incluido mediante un selector dentro de la función jQuery(), la cual actúa como cobertor al envolver dichos elementos con el propósito de mantenerlos juntos y así poder aplicarles operaciones como unidad.

Una vez lograda la obtención y establecimiento de un conjunto de elementos envueltos, identificados mediante un selector cuyo patrón coincidió con algunas de las partes que componen nuestro DOM o creó algún elemento utilizando fragmentos HTML, estamos listos para manipularlo mediante algún componente del grupo de poderosos métodos y comandos con los que cuenta jQuery.

Como hemos planteado en temas anteriores referentes a esta parte del curso, aún no es momento para empezar a ver todos los métodos que tiene la librería, por lo que en este tema únicamente abarcaremos la manera de afinar más el conjunto de elementos, exploraremos la manera en que podemos perfeccionar, ampliar o reducir en subconjuntos nuestro envoltorio de elementos con el que operaremos.

Determinar el tamaño del conjunto

Debemos definir como una clase de preámbulo, que el conjunto de elementos envueltos por jQuery actúa de manera muy parecida a como lo hace un arreglo, tiene propiedades de longitud tal y como las incluye una matriz de elementos hecho con JavaScript, por lo tanto podemos acceder a dichas propiedades para obtener su información.

En caso de que se desee utilizar un método en lugar de una propiedad, para obtener dicha información, jQuery define el método size() que devuelve los mismos datos y nos permite actuar y trabajar con ellos. Por ejemplo, consideremos la siguiente declaración:

jQuery('#unDiv').html('En este DOM hay '+jQuery('p').size()+' párrafos, y '+jQuery('a').size()+' links.');

Básicamente lo que hacemos en la sentencia, es agregar dentro del código HTML del div perteneciente al DOM y cuyo id es “unDiv”, un texto donde incluimos dos conjuntos envueltos que nos regresarán la información para ser desplegada. El primer envoltorio jQuery coincide con todos los elementos de tipo “p” (párrafo) y nos devuelve el número de elementos coincidentes mediante el método size(), lo mismo ocurre con el segundo envoltorio, con la única diferencia que en esta ocasión nos devuelve los links.

El resultado final de la operación es un texto tipo cadena, que se establece como el contenido del elemento div, todo esto gracias al uso del método “.html” el cual analizaremos con más precisión en otro artículo, pero que ahora sabemos a grandes rasgos su función, adherir contenido a un campo o fragmento de la página.

Como pudimos observar, en la sintaxis formal para el uso del método size() no se utilizan parámetros, por lo que el llamado por si solo nos regresa un elemento de conteo, por lo que básicamente podemos definir que su función es regresar el número de elementos que se encuentran en el conjunto envuelto, su uso ya dependerá del que deseemos darle nosotros.

Conclusión

Esto es una simple muestra de lo que podemos realizar para obtener información mediante jQuery, el conjunto de elementos envueltos será la base para la aplicación de operaciones y métodos en un futuro, es necesario empezar a empaparse del tema y como hemos dicho paso a paso se irán abordando temas de más complejidad

Ahora ya sabemos como envolver elementos y sabemos como identificar cuántos elementos contiene cada envoltorio pero ¿Qué pasa si queremos tener acceso a ellos directamente?, en el siguiente artículo empezaremos a analizar formar de lograrlo.