Curso de jQuery (3): Selectores, Segunda Parte

Vamos a seguir viendo selectores de jQuery. La mayor parte de los selectores que hemos visto hasta ahora nos permitían ir a través y hacia abajo del DOM (Document Object Model) o árbol de nuestro HTML (por ser más gráficos). Hay ocasiones en las que necesitamos acceder de manera más directa a un elemento. En este caso tenemos a nuestra disposición los métodos transversales, que nos permiten ir hacia arriba, hacia abajo y por todo el DOM sin problemas. En este artículo vamos a ver uno de ellos, los filtros:

Filtros

Son aquellos que concretan una selección de elementos ya realizada aplicando una selección adicional que limita la selección anterior (por ejemplo, hemos seleccionado previamente todos los elementos div y ahora queremos sólo el cuarto div de esa selección). Los filtros se distinguen así de los selectores que encuentran otros elementos que guardan relación con los elementos ya seleccionados (como los que encuentran descendientes, antecesores o hermanos de una selección anterior, por ejemplo, y que veremos en el artículo siguiente). Vamos a ver los filtros más importantes:

El filtro .not()
.not() lo utilizaremos siempre que queramos seleccionar aquellos elementos que no cumplen con un determinado filtro situado dentro de los paréntesis del .not(). Por ejemplo, si queremos añadir un borde a aquellos divs que no tengan un fondo verde o azul (este ejemplo y los siguientes los he tomado de la web oficial de jQuery):

1	$("div").not(".verde, #azul").css("border-color", "red");

Primero selecciona todos los div del documento y luego selecciona aquellos que no tengan la clase ‘verde’ ni el div ‘azul’ y les aplica el estilo correspondiente de CSS.

not

El filtro .filter()
Otra manera de filtrar una selección de elementos es reducirla a aquellos que sí cumplen con un filtro adicional, y lo hacemos a través de .filter()

Por ejemplo, si queremos cambiar el color de fondo de todos los divs y después poner un borde alrededor de sólo los que tienen la clase ‘centro’

1
2
3

$("div").css("background", "#c8ebcc")
            .filter(".centro")
            .css("border-color", "red");

filter

Y viendo un ejemplo algo más complejo, vamos a aplicar la clase ‘imagen’ a todas las imágenes de un documento, luego vamos a filtrar sólo las que tienen un alt que contenga la palabra ‘importante’ y sólo a esas les vamos a aplicar la clase ‘borde’ (para poder luego aplicarlas un borde a través de CSS o de jQuery, por ejemplo):

1	$('img').addClass('imagen').filter('[alt*=importante]').addClass('borde');

Pero lo que hace a filter() realmente potente es que podemos incluir una función como parámetro del mismo, por ejemplo (obtenido de la web oficial de jQuery):

$("div").css("background", "#b4b0da")
            .filter(function (index) {
                  return index == 1 || $(this).attr("id") == "cuatro";
                })
            .css("border", "3px double red");

lo que hace es aplicar un color de fondo a todos los div del documento y luego filtra con una función (si ponemos como parámetro de la función index tendremos un índice que nos valdrá como contador y que empieza a contar desde cero) el segundo div (el que tiene índice 1) y el div con el id “cuatro” para aplicarles luego un borde rojo de 3px. A través de la función iremos div a div en un bucle devolviendo los que cumplen la condición:

filter

No os preocupéis si no entendéis mucho de lo que se hace, lo importante es ver cómo funciona el selector. Sí destacar que dentro de la función aparece un término nuevo, $(this). Veremos en próximos artículos del curso que $(this) se usa dentro de las funciones y hace referencia al elemento exacto al que afecta la función en ese momento, en este caso el div con id=”cuatro” (en vez de escribir $(div).atrr(‘id’)).

El filtro .slice(comienzo, final)
Hay ocasiones en las que queremos obtener una porción de una determinada selección de elementos basada en la posición de estos elementos dentro de la selección realizada. Entonces utilizamos .slice(), que creará una nueva selección. Admite dos parámetros, un número que indica el inicio (empezando por cero) donde vamos a realizar el corte y otro que indica el final no incluído. Este último valor es opcional. Vamos a ver un ejemplo:

Si seleccionamos todos los elementos p del documento y luego sólo queremos el tercer elemento haríamos:

1	$('p').slice(2,3);

El primer número (donde se empieza a cortar la selección inicial) es un dos porque se empieza a contar desde cero: 0, 1, 2 es decir, empezamos a contar por el tercer elemento. Para el final no incluído pone 3, es decir el cuarto elemento (0,1,2,3) por lo que de todos los p del documento solo se selecciona el tercero.

El filtro .eq()
Reduce el grupo de elementos seleccionados a un elemento único. Su argumento (lo que va entre los paréntesis) es la posición del elemento dentro del grupo de elementos previamente seleccionados (que puede ser un número entre 0 y la longitud completa del número de elementos menos uno, al haber empezado en cero).

Por ejemplo (tomado de la web oficial de jQuery), vamos a cambiar el color de fondo del div con índice 2 (es decir, el tercer div) añadiendo la clase apropiada:

1	$("div").eq(2).addClass("azul");

Y esto es todo. Tenéis algún filtro más en la web oficial de jQuery. El próximo artículo será el último con selectores antes de pasar a la acción con Eventos.