0Pricing
jQuery Academy · Aula

Filtragem Avançada com .filter()

Explore todo o potencial do método .filter(), usando funções para aplicar lógica personalizada e selecionar elementos com base em propriedades ou relações dinâmicas.

Filtragem Avançada com .filter() é uma aula grátis de jQuery Academy no CoddyKit. Esta é a aula 2 de 3. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de jQuery Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de jQuery Academy inclui 3 aulas no total.

Refine as seleções com .filter()

O método .filter() do jQuery é uma forma poderosa de reduzir um conjunto existente de elementos selecionados. Ele ajuda você a manter apenas os elementos que correspondem a critérios específicos.

Pense nele como uma segunda camada de seleção, aplicada depois da seleção inicial, para obter maior precisão.

Filtro básico com seletores

A forma mais simples de usar .filter() é fornecer uma cadeia de seletor CSS. Isso funciona como um seletor padrão, mas se aplica apenas aos elementos que já estão no conjunto atual do jQuery.

Vamos selecionar todas as divs com a classe .item e, em seguida, filtrá-las para manter apenas aquelas que também têm a classe .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 com uma função

A verdadeira força de .filter() aparece quando você passa uma função como argumento. Isso permite aplicar uma lógica altamente personalizada e dinâmica a cada elemento da sua seleção.

  • A função é executada para cada elemento do conjunto atual do jQuery.
  • Ela recebe dois argumentos: index (a posição do elemento no conjunto) e element (o elemento DOM bruto).
  • Retorne true para manter o elemento e false para removê-lo do conjunto filtrado.

Filtragem pela posição do índice

Você pode usar o argumento index na função de filtro para selecionar elementos com base na posição deles no conjunto atual do jQuery. Isso é útil em tarefas como selecionar todos os itens pares ou intervalos específicos.

Vamos selecionar todos os itens de lista em posições pares (começando pelo índice 0) e destacá-los.

<!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>

Com base em atributos e propriedades

O argumento element (ou $(this) dentro da função) permite inspecionar as propriedades, os atributos ou o conteúdo de texto de cada elemento DOM. Isso possibilita uma filtragem altamente específica.

Aqui, vamos encontrar todos os itens de lista que contêm a palavra "Important" no texto e colocá-los em negrito.

<!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>

Filtragem dinâmica com dados

Os atributos de dados do HTML5 (por exemplo, data-status="active") são perfeitos para armazenar informações extras e específicas da aplicação diretamente nos elementos. Você pode usar .filter() para selecionar elementos com base nesses valores de dados personalizados.

Vamos destacar os itens de lista marcados como 'complete' usando o 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>

Filtragem por elemento filho ou pai

Sua função de filtro também pode inspecionar as relações entre os elementos. Por exemplo, talvez você queira selecionar elementos pais que contenham um filho específico, ou vice-versa.

Aqui, vamos encontrar os itens de lista que contêm uma tag <img> e adicionar uma borda.

<!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 complexos com lógica

Dentro da sua função de filtro, você pode combinar várias condições usando operadores lógicos padrão do JavaScript, como && (AND) e || (OR).

Isso permite fazer seleções muito precisas com base em vários critérios ao mesmo tempo, tornando sua filtragem extremamente poderosa:

  • O elemento está visível? AND ele tem uma classe específica?
  • Ele contém o texto 'X'? OR tem o atributo de dados 'Y'?

Filtragem dinâmica no mundo real

Vamos reunir o que aprendemos. Imagine filtrar uma lista de produtos com base em vários critérios. Sua função de filtro pode verificar diversas condições dinamicamente.

Este exemplo destaca os produtos que estão visíveis AND pertencem à categoria 'electronics', usando uma lógica combinada dentro da função de filtro.

<!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>

Desafio de filtragem

Dado o HTML <li class="item special" data-value="10">...</li>, qual função .filter() seleciona corretamente apenas elementos <li> que tenham a classe .special AND um data-value maior que 5?

Recapitulação: o poder da filtragem dinâmica

Agora você dominou os usos avançados do método .filter() do jQuery!

  • Ele refina seleções existentes, proporcionando controle preciso.
  • O uso de uma função permite uma lógica de filtragem dinâmica e complexa.
  • Você pode inspecionar índices, propriedades de elementos, atributos de dados e relações.
  • Combine várias condições com && (AND) e || (OR) para obter critérios altamente específicos.

Esse método poderoso permite criar interfaces de usuário extremamente responsivas e orientadas por dados.

Perguntas Frequentes

A aula “Filtragem Avançada com .filter()” é grátis?

Sim — o texto completo de “Filtragem Avançada com .filter()” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de jQuery Academy, atualize para CoddyKit PRO. O curso de jQuery Academy inclui 3 aulas no total.

O que vou aprender em “Filtragem Avançada com .filter()”?

Explore todo o potencial do método .filter(), usando funções para aplicar lógica personalizada e selecionar elementos com base em propriedades ou relações dinâmicas. Você pratica jQuery Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar jQuery Academy?

Nenhuma experiência prévia é necessária. jQuery Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 3.

Quanto tempo leva a aula “Filtragem Avançada com .filter()”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de jQuery Academy?

Sim. Cada aula de jQuery Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Criação de Pseudosselet ores Personalizados
  2. Filtragem Avançada com .filter()
  3. Exclusão de Elementos com .not()
← Voltar para jQuery Academy