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.
