0Pricing
jQuery Academy · Lección

Filtrado avanzado con .filter()

Explore todo el potencial del método .filter(), utilizando funciones para aplicar lógica personalizada y seleccionar elementos según propiedades o relaciones dinámicas.

Filtrado avanzado con .filter() es una lección gratuita de jQuery Academy en CoddyKit. Esta es la lección 2 de 3. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de jQuery Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de jQuery Academy incluye 3 lecciones en total.

Refinar selecciones con .filter()

El método .filter() de jQuery es una forma potente de reducir un conjunto existente de elementos seleccionados. Permite conservar únicamente los elementos que cumplen criterios específicos.

Considérelo como una segunda capa de selección que se aplica después de la selección inicial para lograr una mayor precisión.

Filtrado básico con selectores

La forma más sencilla de utilizar .filter() es proporcionar una cadena de selector CSS. Funciona como un selector estándar, pero solo se aplica a los elementos que ya forman parte del conjunto jQuery actual.

Seleccionemos todos los div con la clase .item y, después, filtremos el resultado para conservar únicamente los que también tengan la clase .active.

<!DOCTYPE html>
<html>
<head>
<title>Filter by Selector</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
  <div class="item">Item 1</div>
  <div class="item active">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item active">Item 4</div>

  <script>
    $(document).ready(function(){
      // Select all divs with class 'item'
      var allItems = $('div.item');
      // Then filter to keep only those with class 'active'
      var activeItems = allItems.filter('.active');
      activeItems.css('color', 'blue');
    });
  </script>
</body>
</html>

Lógica personalizada con una función

La verdadera potencia de .filter() se manifiesta cuando se pasa una función como argumento. Esto permite aplicar una lógica muy personalizada y dinámica a cada elemento de la selección.

  • La función se ejecuta para cada elemento del conjunto jQuery actual.
  • Recibe dos argumentos: index (la posición del elemento en el conjunto) y element (el elemento DOM sin envolver).
  • Devuelva true para conservar el elemento y false para eliminarlo del conjunto filtrado.

Filtrar por posición del índice

Puede utilizar el argumento index de la función de filtrado para seleccionar elementos según su posición dentro del conjunto jQuery actual. Esto resulta útil para tareas como seleccionar cada segundo elemento o intervalos específicos.

Seleccionemos cada segundo elemento de la lista (los que tienen índices pares, empezando por 0) y resaltémoslos.

<!DOCTYPE html>
<html>
<head>
<title>Filter by Index</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
  <ul>
    <li>Item 0</li>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>

  <script>
    $(document).ready(function(){
      $('li').filter(function(index) {
        // Keep items at even indices (0, 2, 4...)
        return index % 2 === 0;
      }).css('background-color', 'lightgreen');
    });
  </script>
</body>
</html>

Según atributos y propiedades

El argumento element (o $(this) dentro de la función) permite inspeccionar las propiedades, los atributos o el contenido de texto de cada elemento DOM. Esto posibilita un filtrado muy específico.

Aquí buscaremos todos los elementos de lista cuyo texto contenga la palabra "Important" y los mostraremos en negrita.

<!DOCTYPE html>
<html>
<head>
<title>Filter by Property</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
  <ul>
    <li>Task 1</li>
    <li>Important Task 2</li>
    <li>Task 3</li>
    <li>Another Important Task 4</li>
  </ul>

  <script>
    $(document).ready(function(){
      $('li').filter(function() {
        // Check if the text content includes "Important"
        return $(this).text().includes('Important');
      }).css('font-weight', 'bold');
    });
  </script>
</body>
</html>

Filtrado dinámico con datos

Los atributos de datos de HTML5 (por ejemplo, data-status="active") son perfectos para almacenar información adicional y específica de la aplicación directamente en los elementos. Puede utilizar .filter() para seleccionar elementos según estos valores de datos personalizados.

Resaltemos los elementos de lista marcados como 'complete' mediante su atributo data-status.

<!DOCTYPE html>
<html>
<head>
<title>Filter by Data</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
  <ul>
    <li data-status="pending">Task A</li>
    <li data-status="complete">Task B</li>
    <li data-status="pending">Task C</li>
    <li data-status="complete">Task D</li>
  </ul>

  <script>
    $(document).ready(function(){
      $('li').filter(function() {
        // Check the 'data-status' attribute
        return $(this).data('status') === 'complete';
      }).css('text-decoration', 'line-through');
    });
  </script>
</body>
</html>

Filtrar por elemento secundario o principal

La función de filtrado también puede inspeccionar las relaciones entre los elementos. Por ejemplo, puede querer seleccionar elementos principales que contengan un elemento secundario específico, o viceversa.

Aquí buscaremos los elementos de lista que contengan una etiqueta <img> y les añadiremos un borde.

<!DOCTYPE html>
<html>
<head>
<title>Filter by Relationship</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
  <ul>
    <li>Text only</li>
    <li>Item with <img src="https://placehold.co/16x16" alt="icon"></li>
    <li>Another text item</li>
    <li>Item with another <img src="https://placehold.co/16x16" alt="image"></li>
  </ul>

  <script>
    $(document).ready(function(){
      $('li').filter(function() {
        // Check if the current <li> contains an <img>
        return $(this).find('img').length > 0;
      }).css('border', '2px solid orange');
    });
  </script>
</body>
</html>

Filtros complejos con lógica

Dentro de la función de filtrado, puede combinar varias condiciones mediante operadores lógicos estándar de JavaScript, como && (Y) y || (O).

Esto permite realizar selecciones muy precisas basadas en varios criterios a la vez, lo que hace que el filtrado sea extremadamente potente:

  • ¿Está visible? Y, ¿tiene una clase específica?
  • ¿Contiene el texto 'X'? O, ¿tiene el atributo de datos 'Y'?

Filtrado dinámico en situaciones reales

Reunamos lo que hemos aprendido. Imagine que filtra una lista de productos según varios criterios. Su función de filtrado puede comprobar dinámicamente varias condiciones.

Este ejemplo resalta los productos que están visibles Y pertenecen a la categoría 'electronics', mediante una lógica combinada dentro de la función de filtrado.

<!DOCTYPE html>
<html>
<head>
<title>Dynamic Filtering</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .hidden { display: none; }
</style>
</head>
<body>
  <div class="product" data-category="electronics">Laptop</div>
  <div class="product hidden" data-category="books">Novel</div>
  <div class="product" data-category="electronics">Mouse</div>
  <div class="product" data-category="books">Textbook</div>

  <script>
    $(document).ready(function(){
      $('div.product').filter(function() {
        // Filter products that are visible AND in 'electronics' category
        var isVisible = $(this).is(':visible');
        var isElectronics = $(this).data('category') === 'electronics';
        return isVisible && isElectronics;
      }).css('background-color', 'lightblue');
    });
  </script>
</body>
</html>

Desafío de filtrado

Dado el siguiente HTML <li class="item special" data-value="10">...</li>, ¿qué función .filter() selecciona correctamente solo los elementos <li> que tienen la clase .special Y un data-value mayor que 5?

Repaso: potencia del filtrado dinámico

¡Ya domina los usos avanzados del método .filter() de jQuery!

  • Refina las selecciones existentes y proporciona un control preciso.
  • El uso de una función permite aplicar una lógica de filtrado dinámica y compleja.
  • Puede inspeccionar índices, propiedades de elementos, atributos de datos y relaciones.
  • Combine varias condiciones con && (Y) y || (O) para definir criterios muy específicos.

Este potente método permite crear interfaces de usuario increíblemente adaptables y basadas en datos.

Preguntas frecuentes

¿La lección «Filtrado avanzado con .filter()» es gratis?

Sí — el texto completo de «Filtrado avanzado con .filter()» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de jQuery Academy, actualiza a CoddyKit PRO. El curso de jQuery Academy incluye 3 lecciones en total.

¿Qué aprenderé en «Filtrado avanzado con .filter()»?

Explore todo el potencial del método .filter(), utilizando funciones para aplicar lógica personalizada y seleccionar elementos según propiedades o relaciones dinámicas. Practicas jQuery Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar jQuery Academy?

No se requiere experiencia previa. jQuery Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 3.

¿Cuánto tiempo toma la lección «Filtrado avanzado con .filter()»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de jQuery Academy?

Sí. Cada lección de jQuery Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Creación de pseudoselectores personalizados
  2. Filtrado avanzado con .filter()
  3. Exclusión de elementos con .not()
← Volver a jQuery Academy