Introducción a los filtros en jQuery

Los filtros en jQuery son herramientas poderosas que permiten a los desarrolladores seleccionar y manipular elementos del DOM de manera más eficiente y precisa. Mediante el uso de métodos específicos, es posible acceder a subconjuntos de elementos con cierto tipo de criterios, lo cual facilita la creación de páginas web interactivas y dinámicas.

En esta guía, explicaré qué son los filtros en jQuery, cómo se utilizan, y algunos casos de uso comunes que pueden mejorar tu proyecto de desarrollo web. También te puede interesar conocer filtros o selectores de elementos relacionados.

¿Qué son los filtros en jQuery?

Los filtros en jQuery son métodos que permiten refinar la selección de elementos en el Document Object Model (DOM). A diferencia de los selectores básicos, que simplemente eligen elementos con cierta característica, los filtros permiten a los desarrolladores seleccionar elementos que cumplan con condiciones más específicas.

Esto se logra mediante el uso de métodos como .filter(), que pueden aplicarse a colecciones de elementos para devolver un subconjunto que cumple con los criterios dados.

Tipos de Filtros Comunes

jQuery incluye una variedad de filtros que pueden facilitar tareas complejas:

• .first() y .last(): Seleccionan el primer o último elemento de una colección.
• .even() y .odd(): Seleccionan elementos con índices pares o impares.
• .eq(index): Selecciona el elemento en la posición especificada.
• .not(selector): Excluye elementos que coincidan con un selector.

Estos métodos permiten un manejo más flexible y eficiente de los elementos del DOM, haciendo que la manipulación del HTML sea más intuitiva.

Filtros que facilitan el acceso al DOM

• Selecciona los elementos siguientes a partir de uno concreto. $(‘p:gt(3)’).
• Selecciona los elementos anteriores a partir de uno concreto. $(‘p:lt(3)’).
• Selecciona todos los encabezados (Headers – h1,h2,h3,h4,h5,h6). $(‘:header’).
• Selecciona todos los elementos excepto los indicados. $(‘p:not(.ej3)’).
• Selecciona los elementos indicados en la posición establecida. $(‘p:nth-of-type(2)’) → este ejemplo funciona igual que: eqPero en este caso podemos aplicarle una formula para que la posición se inicie cada vez. Por ejemplo, queremos seleccionar todos los elementos cada 4 elementos: $(‘p:nth-of-type(4n+0)’). En este caso el 0 indica desde que elemento comenzamos, en este ejemplo seleccionaría primero el 3er elemento, si en vez de 0 ponemos un 2, el primer elemento en seleccionarse será el segundo, y el siguiente el 6º.
• Selecciona los elementos indicados en la posición establecida pero de abajo hacia arriba. $(‘p:nth-last-of-type(2)’).El funcionamiento es igual que el anterior solo que comienza a contar los elementos por abajo.

Filtros hijos

• Selecciona el primer hijo. $(‘p a:first-child’). A diferencia de :first devuelve todos los hijos de todos los padres.
• Selecciona el último hijo. $(‘p a:last-child’).
• Selecciona el hijo en la posición indicada. $(‘p a:nth-child(2)’).
• Selecciona hijos pares. $(‘p a:nth-child(even)’).
• Selecciona hijos impares. $(‘p a:nth-child(odd)’).
• Selecciona hijos únicos. $(‘p a:only-child’). Selecciona solo los párrafos con 1 enlace.

Filtros de contenido

• Seleccionar un elemento en función de un texto. $(‘p:contains(“texto”)’). Selecciona todos los párrafos que contienen el texto TEXTO.
• Selecciona un elemento sin elementos (hijos) ni texto. $(‘p:empty’).
• Selecciona los elementos padre. $(‘p:parent’).
• Selecciona los elementos que contienen otros elementos especificados. $(‘p:has(a)’). Selecciona los párrafos que tienen enlaces (1 o más).

Filtros por atributos

• Selecciona todos los elemento que estén ocultos (display:none;). $(‘p:hidden’).
• Selecciona todos los elementos que estén visibles. $(‘p:visible’).
• Selecciona los elementos que tienen un atributo concreto (class, id, type, etc.). $(‘p[class]’). Selecciona todos los párrafos que tienen class, sea cual sea el class.
• Selecciona todos los elementos que tienen un atributo concreto establecido. $(‘input[type=”file”]’), selecciona los input tipo file.
• Selecciona los elementos que tienen un atributo distinto del especificado, $(‘input[type!=”file”]), selecciona los inputs que no sean file.
• Selecciona los elementos con atributos que empiezan por el valor especificado. $(‘a[title^=”Novedades: ”’), selecciona todos los enlaces en los que la etiqueta title comience por Novedades: .
• Selecciona los elementos con atributos que terminan con el valor especificado. $(‘img[alt$=” :panorámica.”’)
• Selecciona los elementos con atributos que contienen el valor especificado. $(‘img[alt*=”Bilbao”’)

Filtros múltiples

Independientemente del potencial de los filtros comentados, es posible combinarlos, como por ejemplo:

$(‘a[title*=”Ejemplo1”] a[href*=”ejemplo-1”] a[class=”Ejemplo1”]’); => Solo se seleccionarían aquellos enlaces que cumplan las 3 condiciones, que el title y el href contengan el texto indicado y que tengan un class=’Ejemplo1′.

Implementación de filtros en jQuery

Para aplicar filtros en jQuery, primero debes seleccionar los elementos que deseas manipular. Luego, puedes utilizar métodos de filtrado para refinar esta selección.

A continuación presento un ejemplo práctico para ilustrar cómo se puede implementar un filtro utilizando jQuery.

Ejemplo práctico

Supongamos que tienes una lista de elementos <li> en un <ul>, y deseas seleccionar solo aquellos que contienen una clase específica:

<ul id="bloque">
  <li class="activo">Elemento 1</li>
  <li>Elemento 2</li>
  <li class="activo">Elemento 3</li>
  <li>Elemento 4</li>
</ul>

Puedes utilizar jQuery para seleccionar y resaltar los elementos que tienen la clase «activo»:

$(document).ready(function() {
  $('#bloque li').filter('.activo').css('background-color', 'yellow');
});

Este código selecciona todos los elementos <li> dentro del <ul> con el id «bloque», aplica un filtro para seleccionar solo aquellos con la clase «activo», y cambia su color de fondo a amarillo.

Esta implementación sencilla muestra cómo los filtros pueden usarse para aplicar estilos o realizar acciones en subconjuntos específicos de elementos.

Ejemplo seleccionar el primer elemento

<!DOCTYPE html>
<html>
<head>
 <title>Selector del primer elemento</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function() {
 $('#miId').click(function(){ 
 $('ul li:first').css({"border":"1px solid red"});
 }); 
 });
 </script>
 <style>
 *{
 width: 100%;
 margin: 0 auto; 
 } 
 </style>
</head>
<body>
 <h1 id='miId'>Pincha aquí para seleccionar primer elemento</h1> 
 <ul>
 <li>
 Lista 1
 </li>
 <li>
 Lista 2
 </li>
 <li>
 Lista 3
 </li>
 <li>
 Lista 4
 </li>
 <li>
 Lista 5
 </li>
 </ul>
 <hr>
 <h2>LISTA 2</h1>
 <ul>
 <li>
 Lista 1
 </li>
 <li>
 Lista 2
 </li>
 <li>
 Lista 3
 </li>
 <li>
 Lista 4
 </li>
 <li>
 Lista 5
 </li>
 </ul>
</body>
</html>

Ver ejemplo

Ejemplo seleccionar el último elemento

$('ul li:last').css({"border":"1px solid red"});

Seleccionar los elementos pares e impares

$('ul li:even').css({"border":"1px solid red"});
$('ul li:odd').css({"border":"1px solid red"});

Seleccionar un elemento concreto (:eq)

$('ul li:eq(3)').css({"border":"1px solid red"});

Selectores por atributos

//Seleccionar elementos que tienen el atributo
$('a[title]')

//Seleccionar elementos que cumplen la condición
$('a[title='prueba']')

//Seleccionar elementos que NO cumplen la condición
$('a[title!='prueba']')

//Seleccionar elementos que empiezan por...
$('a[title^='prueba']')

//Seleccionar elementos que terminan por...
$('a[title$='prueba']')

//Seleccionar elementos que contiene...
$('a[title*='prueba']')

Seleccionar elementos siguientes y anteriores (:gt y :lt)

//Pinta los elementos siguientes al 2, es decir el 3, 4, etc
$('ul.uno li:gt(2)').css({"border":"1px solid red"});

//Pinta los elementos anteriores al 2, es decir el 0 y el 1 $('ul.dos li:lt(2)').css({"border":"1px solid red"});

Excluir un elemento (:not)

$('li:not(ul.dos li)').css({"border":"1px solid red"});

Selector de encabezados (:header)

$(':header').css({"border":"1px solid red"});

Selector con mismo nombre de etiqueta

//los primeros hijos de los padres que cumplan la condición
$('li.pr:first-of-type').css({"border":"1px solid red"});

//los últimos hijos de los padres que cumplan la condición
$('li.pr:last-of-type').css({"border":"1px solid red"});

//Elementos hijos sin hermanos
$('li:only-of-type').css({"border":"1px solid red"});

Selector de un texto (:contains, :empty, :parent, :has)

//Todos los li que tengan el texto LISTA 1
$('li:contains("Lista 1")').css({"border":"1px solid red"});

//Divs que estén vacíos
$('div:empty').css({"border":"1px solid red"});

//Enlaces que tengan elementos HTML o texto, es decir que no estén vacíos
$('a:parent').css({"border":"1px solid red"});

//li que contengan el elemento a
$('li:has(a)').css({"border":"1px solid red"});

Selector elementos ocultos

//Ocultar elementos visibles
$('ul:visible').hide();

//Mostrar elementos ocultos
$('ul:hidden').show();

Casos de uso común

Los filtros en jQuery son ampliamente utilizados en diversos contextos de desarrollo web debido a su capacidad para manipular elementos de manera eficiente. A continuación, se presentan algunos casos de uso comunes:

• Validación de formularios: Aplicar estilos o mensajes de error a campos vacíos o que no cumplen con ciertos criterios.
• Galerías de imágenes: Filtrar imágenes por categorías o etiquetas, mostrando solo aquellas que cumplen con los criterios seleccionados por el usuario.
• Listados dinámicos: Resaltar o modificar elementos de listas basadas en la interacción del usuario, como mostrar tareas completadas o pendientes.
• Navegación condicional: Alterar menús o elementos de navegación para adaptarse a diferentes tipos de usuarios o situaciones específicas.

Estos ejemplos ilustran cómo los filtros pueden ayudar a mejorar la experiencia del usuario al permitir un manejo más específico y dinámico del contenido de una página web.

Ventajas de usar filtros en jQuery

Utilizar filtros en jQuery ofrece varias ventajas que facilitan el desarrollo y la personalización de páginas web:

• Eficiencia: Los filtros permiten seleccionar y modificar un subconjunto específico de elementos de forma directa y rápida, optimizando el rendimiento del script.
• Claridad del código: Al proporcionar métodos claros y concisos, los filtros contribuyen a que el código sea más legible y fácil de mantener.
• Flexibilidad: Ofrecen la posibilidad de realizar operaciones complejas sobre grupos de elementos sin necesidad de escribir funciones personalizadas complicadas.
• Mejora de la experiencia del usuario: Permiten personalizar las interacciones y el contenido de la página según las acciones del usuario o los criterios específicos, mejorando la usabilidad y accesibilidad.

Las ventajas mencionadas hacen de los filtros una herramienta esencial para cualquier desarrollador que busque crear aplicaciones web dinámicas y receptivas.

Conclusión

Los filtros en jQuery son una funcionalidad esencial para los desarrolladores que buscan manipular el DOM de manera eficaz y precisa. Al comprender y utilizar estos filtros, puedes añadir interactividad y personalización a tus proyectos de manera eficiente. Desde la selección de elementos específicos hasta la aplicación de estilos o efectos condicionados, los filtros ofrecen una gran flexibilidad y control en el desarrollo web.