Trabajando con elementos en jQuery: Métodos de búsqueda

En este artículo estudiaremos la obtención de elementos mediante métodos de búsqueda y así formar subconjuntos, analizaremos las funciones find, is y contains.

Tal y como ya hemos venido manejando en los dos últimos artículos de nuestro tutorial, el tema en esta entrega será la creación de subconjuntos de elementos envueltos. Es de nuestro saber, que existen varias maneras de poder concretar dicha operación, por lo que en esta ocasión nos enfocaremos en buscar expandir un poco más nuestra visión estudiando tres nuevas y distintas maneras de obtenerlos a partir de un conjunto ya existente.

Con un poco de la famosa “magia” que nos ofrece jQuery, aún podemos realizar un par de trucos que nos regresen colecciones de elementos envueltos, lo que a su vez nos permitirá su operación. Para llevar acabo esto usaremos las funciones “find()”, “is()” y “contains()”, tres métodos sencillos y de fácil comprensión que explicaremos a continuación.

Método Find

El método “find()” nos permite buscar elementos a través de un conjunto envuelto existente e irlos recolectando, para que finalmente nos devuelva un nuevo conjunto que contenga todos los elementos que coincidieron con la expresión que se proporcionó como parámetro. Por ejemplo, si suponemos que tenemos un conjunto envuelto guardado en la variable “conjEnv”, y queremos obtener un nuevo subconjunto que contenga todos elementos que son párrafos de tipo cita y que se encuentran en el conjunto original, aplicaremos una sentencia como la siguiente:

conjEnv.find("p cite");

Hay que tener en cuenta que también existe la posibilidad de utilizar esta función con una sola instrucción, basta con pasar un parámetro de contexto dentro del selector jQuery de la siguiente manera:

jQuery('p cite', conjEnv);

Con esto la función jQuery recibe dos parámetros, el primero indicando la expresión a buscar y el segundo dando el conjunto donde se buscará.

En principio el método puede resultar bastante simple, pero como en muchos de los otros métodos de jQuery relacionados a conjuntos envueltos, el verdadero poder del método se puede observar cuando es utilizado como parte de una cadena de operaciones.

En resumen, este método se encargará de devolvernos un subconjunto con elemento de coincidencia a una expresión pasada como parámetro, dicho parámetro debe ser una cadena, que representa un selector de jQuery con él que los elementos deseados deben coincidir.

Método Contains

Además de encontrar los elementos de un conjunto envuelto que coincidan con un selector de jQuery, jQuery también proporciona un método para encontrar los elementos que contienen una cadena especifica. El método “contains()” devolverá un nuevo conjunto envuelto que consta de todos los elementos que contienen la cadena, que se pasa como parámetro, en cualquier lugar dentro de su contenido. Consideremos el siguiente código:

jQuery('p').contains('Texto de prueba');

Esta expresión obtiene un conjunto que contiene envueltos todos los párrafos que poseen en su contenido la cadena “Texto de prueba”. Hay que tener en cuenta que en este ejemplo hemos aplicado el método de búsqueda a todo el cuerpo del documento, por lo que en dicha búsqueda se incluyen los elementos hijos del párrafo, junto con sus etiquetas y atributos, pero no se toman en cuenta los atributos de la propia etiqueta, por lo que el resultado no regresa coincidencias dentro de la misma etiqueta “p”.

Método Is

El último método que vamos a examinar en este artículo es uno que nos permite poner a prueba un conjunto envuelto para ver si contiene al menos un elemento que coincida con el selector de la expresión dada. El método “is()” devuelve “true”(Verdadero) si al menos un elemento coincide con el selector, y “false”(Falso) si ninguno coincide. Por ejemplo:

var tieneImagenes = jQuery('*').is('img');

Con esta declaración establecemos que el valor de la variable “tieneImagenes” será “true” si la página actual tiene algún elemento de tipo imagen. Con ello podemos formar un subconjunto con aquellos elementos que contengan las partes que deseamos, y así una vez todos juntos aplicar una operación específica únicamente a los de esa clase.

Conclusión

En este artículo tuvimos la oportunidad de analizar y evaluar tres sencillos métodos de búsqueda que nos proporciona la librería por defecto, su uso puede ir variando con el paso del curso, pero en esta ocasión les hemos dado un enfoque relacionado a la creación de subconjuntos. A partir del siguiente artículo empezaremos a estudiar el manejo de cadenas en jQuery.