Um pouco mais de Jquery: Filter()

Olá pessoal...

Estou de volta para falar um pouco mais de jQuery.
O assunto hoje é o método Filter() deste excelente framework para javascript : )

Segundo a definição este método retorna um subconjunto dos elementos que casem com o seletor ou com o resultado de uma função em teste.

Vamos a um exemplo simples passando como seletor o elemento 'div' :



<html>

<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<title>Testando o método filter() jQuery</title>
<style>

div {
   width:60px;
   height:60px;
   margin:5px;
   float:left;
   border:2px white solid;
   background:#c8ebcc;
}

</style>
</head>

<body>

<div></div>

<div class="middle"></div>

<div class="middle"></div>

<div class="middle"></div>

<div class="middle"></div>

<div></div>

<script>
   $("div").filter(".middle").css("border-color", "red");
</script>

</body>
</html>

O código acima foi aproveitado do site oficial da jQuery (http://api.jquery.com/filter/), fiz apenas uma pequena mudança para ajudar mais na compreensão do exemplo.

A execução do código acima mostra 6 divs com a cor de fundo esverdeada, sendo que a 2º a 3º a 4º e a 5º divs estão com a borda vermelha.

Como isso é possível?

Graças ao método Filter().

$("div").filter(".middle").css("border-color", "red");

Este trecho de código seleciona todos os elementos div:

 $("div")
 
que possuam a classe middle:

filter(".middle")
 
e então, adicionam-lhes uma borda de cor vermelha:

.css("border-color", "red")
 

Portanto, o método filter() 'filtra' os elementos que coincidam com o seletor que lhe é passado como parâmetro.

Lembrando que o retorno é um conjunto de elementos jQuery e  por isso a possibilidade de se aplicar logo em seguida o método css() para manipular o estilo, no caso, a adição de uma borda vermelha.
 
Muito simples e fácil!
 
Por hoje é isso!

Até a próxima.