Trabajando con elementos en jQuery: Afinación del conjunto

Estudiaremos la forma de eliminar y filtrar elementos de nuestro conjunto envuelto, analizaremos las funciones "not()" y "filter()" de jQuery

Hasta el momento hemos podido apreciar la sencillez con la que jQuery crea, agrega y maneja elementos, la creación de conjuntos envueltos a partir de varios selectores y la unión de dichos conjuntos mediante el uso del método “add()”, el cual tuvimos oportunidad de estudiar en el artículo anterior, hacen que podamos deducir la simplicidad de la librería para poder realizar la operación contraria, eliminar elementos del conjunto.

Método not() de jquery

Esta tarea se lleva acabo utilizando una metodología muy similar a la usamos para agregar elementos, al igual que en el caso anterior, podemos utilizar varios selectores de forma encadenada para finalmente poder formar una relación de excepción mediante el empleo del método “not()”. Esto lo hace muy similar a utilizar el filtro y selector “:not”, el cual ya estudiamos antes, pero con una funcionalidad más parecida al método “add()” ya que lo podemos establecer en cualquier lugar dentro de una cadena de comandos de jQuery.

Digamos que queremos seleccionar todos aquellos elementos de tipo imagen que se encuentren en una página y que cuenten con un atributo de título, a excepción de aquellos que cuenten con la palabra “piano” en el valor de dicho atributo. Para esto podemos deducir un simple selector que exprese la condición descrita, es decir algo como:

img[title]:not([title*=piano])

Y con ello bastaría para rastrear los elementos deseados, pero por el bien del artículo y el ejemplo que tratamos de ilustrar, haremos caso omiso de esto y procederemos olvidándonos del filtro “:no”. Mediante el uso del método “not()”, el cual se encarga de eliminar todos los elementos de un conjunto envuelto que coinciden con la expresión del selector proporcionado, podemos expresar una relación de excepción que cumpla con lo descrito de la siguiente manera:

jQuery('img[title]').not('[title*=piano]')

Hay que tener en cuenta que el selector que utilizamos como parámetro al método “not()” esta limitado únicamente a expresiones de filtro, por lo que se omite cualquier referencia a un elemento espefico, y gracias a ello le permite abarcar todos los tipos de elementos en el documento. Si en el ejemplo pasado hubieramos usado un selector más explicíto no hubieramos podido obtener el resultado esperado.

Al igual que con “add()”, el método “no()” también se puede utilizar para quitar elementos individuales de la envuelta establecido por pasar una referencia a un elemento o un conjunto de referencias elemento. Este último es interesante y de gran alcance porque, recuerde, cualquier jQuery envuelto sistema se puede utilizar como una matriz de referencias elemento.

El funcionamiento del método es sencillo, si el parámetro enviado es un selector de filtro de jQuery los elementos que coinciden con ese selector serán removidos, en cambio si el parámetro es una referencia a un elemento, entonces ese elemento en específico es el que se elimina del conjunto envuelto. Hay que aclarar que también se pueden pasar series de referencias de elementos con lo que definimos cada elemento que desea ser eliminado.

Método filter() de jquery

Existen ocasiones en las que en vez de eliminar directamente los elementos del conjunto, simplemente deseamos filtrar el envoltorio para obtener los elementos que nos interesan, el problema es que a veces estas separaciones se deben realizar con filtros que incluyen formas muy díficiles o imposibles de estructurar en una expresión de selección. Para estos casos, debemos recurrir a la programación de filtrado, recorriendo todos los elementos del conjunto para después hacer uso del método “no()” y así ir eliminando los elementos específicos que no cumplen con los criterios.

Esto sería una solución, pero como los creadores de jQuery siempre piensan en nosotros nos hicieron el favor de crear el método “filter()”, esta función invoca a cada elemento del conjunto envuelto y elimina aquellos que regresan el valor de “false” al momento de llamarlos.

Por ejemplo, digamos que, por alguna razón, queremos crear un conjunto envuelto donde se reunan todos los elementos “td” que contengan un valor numérico. Aunque los selectores de jQuery son bastante potentes no existe alguno que pueda expresar el tipo de elementos que queremos obtener, por lo que debemos utilizar el método “filter()” de la siguiente manera:

jQuery('td').filter(function(){return this.innerHTML.match(/^d+$/)})

Con esta expresión tomamos todos los elementos “td” y los guardamos en un conjunto envuelto, después pasamos a invocar la función “filter()” a la cual le damos como parametro una función que se encarga de examinar el contenido de cada elemento. La función que fue dada como parámetro, utiliza una expresión regular para determinar si el contendio del elemento coincide con el patrón descrito, devolviendo false o true según el resultado, dicho patrón describe a los dígitos.

Con esto cada elemento que devuelve false se quita del conjunto y la función finalmente nos regresa un nuevo conjunto, que contendrá únicamente los elementos que cumplen con la descripción dada.

El método de “filter()” también se puede utilizar con una expresión de selección que cumpla con las mismas funciones que describimos anteriormente en el método “no()”, es decir, utiliza selectores de filtro con un tipo de elemento implícito. Cuando se utiliza de esta manera, opera inversamente a como lo hace el método “no()” extrayendo los elementos que coinciden con el selector.

Conclusión

Los métodos “no()” y “filter()” son funciones que nos dan los medios necesarios y de gran alcance para poder ajustar un conjunto de elementos envueltos al momento, podiendo agregar sobre la estructura base de nuestra declaración cualquier otra función necesaria para así realizar varias operaciones en una sola sentencia. En los siguientes artículos analizaremos la manera de crear y utilizar los subconjuntos, que crearemos a partir de la posición de los elementos dentro del conjunto.