jQuery - método filter() para percorrer
Exemplo
Mudar a cor de todos os divs e adicionar borda à classe "middle":
$("div").css("background", "#c8ebcc")
.filter(".middle")
.css("cor-da-borda", "vermelho");
Definição e uso
O método filter() reduz o conjunto de elementos correspondentes ao conjunto de elementos que correspondem ao seletor especificado.
Sintaxe
.filter(seletor)
| Parâmetros | Descrição |
|---|---|
| seletor | Valor de string, contendo a expressão do seletor para correspondência da coleção de elementos atual. |
Explicação detalhada
Se for fornecido um objeto jQuery representando uma coleção de elementos DOM, o método .filter() constrói um novo objeto jQuery de subconjunto de elementos que correspondem ao seletor. O seletor testará cada elemento; todos os elementos que correspondem ao seletor serão incluídos no resultado.
Pense na seguinte página com uma lista simples:
<ul> <li>item de lista 1</li> <li>item de lista 2</li> <li>item de lista 3</li> <li>item de lista 4</li> <li>item de lista 5</li> <li>item de lista 6</li> </ul>
Podemos aplicar este método ao conjunto de itens dessa lista:
$('li').filter(':even').css('background-color', 'red');
O resultado dessa chamada é definir o fundo dos itens 1, 3, 5 como vermelho, pois eles todos correspondem ao seletor (lembrando, :even e :odd usam índice baseado em 0).
Uso da função de filtragem
A segunda forma de usar este método é, através de uma função em vez de um seletor para filtrar elementos. Para cada elemento, se a função retornar true, o elemento será incluído no conjunto filtrado; caso contrário, será excluído.
Veja o seguinte fragmento HTML um pouco mais complexo:
<ul> <li><strong>lista</strong> item 1 - um tag strong</li> <li><strong>lista</strong> item <strong>2</strong> - dois <span>tags strong</span></li> <li>item de lista 3</li> <li>item de lista 4</li> <li>item de lista 5</li> <li>item de lista 6</li> </ul>
Podemos selecionar esses itens de lista e filtrá-los com base em seu conteúdo:
$('li').filter(function(index) {
return $('strong', this).length == 1;
}).css('background-color', 'red');
