Desenvolvimento - Javascript

Filtrando elementos com jQuery

Veja neste artigo quais são e como trabalhar com as funções de filtro disponíveis nativamente na biblioteca jQuery.

por Joel Rodrigues


Muitas vezes, quando trabalhamos com a biblioteca jQuery, temos a necessidade de filtrar certos elementos da página de segundo características específicas. Apesar de ser possível utilizar seletores CSS para realizar boa parte desses filtros, existem funções nativas de sintaxe mais simples que podem tornar esta tarefa ainda mais fácil.

Neste artigo, cada função será apresentada individualmente, juntamente com um exemplo de uso e discussão dos resultados obtidos. Para facilitar a compreensão, apenas uma estrutura HTML será usada para todas as funções. O leitor pode então salvar o conteúdo da Listagem 1 como um arquivo de extensão html e, no local indicado, inserir o código das listagens de cada exemplo para teste.

Observação 1: para o desenvolvimento dos exemplos deste artigo, é necessário que o leitor conheça, ao menos basicamente, o funcionamento da biblioteca jQuery e saiba como utilizá-la em uma página web.

Listagem 1: Estrutura HTML utilizada

<html>
<head>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$("#container").children().eq(2).addClass("destaque");
		});
	</script>
	<style type="text/css">
		#div1{
			border:solid 1px;
			width:100px;
			height:20px;
		}
		#p1{
			border:solid 2px green;
			width:150px;
			height:20px;
		}
		#div2{
			border:solid 1px red;
			width:200px;
			height:20px;
		}
		.destaque{
			background-color:yellow;
		}
	</style>
</head>
<body>
	<div id="container">
		<div id="div1">
			<span>div1</span>
		</div>
		<p id="p1">
			p1
		</p>
		<div id="div2"></div>
	</div></body>
<html>

Note que foram aplicados estilos simples aos elementos no interior da div “container” apenas para diferenciá-los uns dos outros visualmente. Vamos então às funções.

eq

A função eq() seleciona um único elemento em uma lista de acordo com seu índice. Existem duas possibilidades de chamada: passando um índice positivo ou negativo. Com a passagem de um valor positivo como parâmetro, o elemento é selecionado pelo seu índice real na lista, já com parâmetro negativo, a contagem para seleção é feita de trás para frente. Por exemplo, passando o valor -1, o elemento selecionado seria o último.

Observação 2: apesar de a contagem começar em zero, o último elemento em contagem negativa é o -1, pois não faz sentido usar o zero com valor negativo.

Na listagem a seguir, selecionamos o elemento filho da div “container” que tenha o índice 1, ou seja, o segundo elemento, e adicionamos a ele a classe CSS “destaque”.

Listagem 2: Exemplo de uso da função eq

$("#container").children().eq(1).addClass("destaque");

Abrindo o arquivo no browser, o parágrafo “p1” deve ter a cor do plano de fundo alterada para amarelo.

first

De nome sugestivo, a função first() não requer nenhum parâmetro e seleciona o primeiro elemento de uma lista. Por exemplo, no caso dos elementos filhos da div “container”, o elemento selecionado com o uso dessa função seria a div “div1”. Na listagem a seguir vemos esse exemplo na prática, onde o plano de fundo da “div1” será alterado para amarelo.

Listagem 3: Exemplo de uso da função first

$("#container").children().first().addClass("destaque");

last

Semelhante à função anterior, mas retorna o último elemento da lista filtrada. No caso, aplicando esta função aos elementos filhos da div “container”, o resultado seria a div “div2”, a última da lista.

Listagem 4: Exemplo de uso da função last

$("#container").children().last().addClass("destaque");

Com isso a “div2” deve ter seu background alterado para amarelo.

is

Esta função, diferente das apresentadas até agora, não seleciona um elemento, ela retorna true ou false caso uma condição seja atendida. Esta condição indica se o elemento filtrado possui ou não certa característica.

Como parâmetro é passado um filtro que identifique o elemento, por exemplo, pelo tipo de tag. Apesar de não ser completo, o entendimento torna-se mais fácil quando vemos o código na prática.

Na Listagem 5, filtramos o primeiro elemento filho da div “container” e verificamos se é uma div e, dependendo do resultado, adicionamos a ela classe “destaque”. É de se esperar que o resultado seja verdadeiro.

Listagem 5: Exemplo de uso da função is

var elemento = $("#container").children().first();
if($("#container").children().is("div"))
	elemento.addClass("destaque");

not

A função not() é utilizada para excluir certo grupo de elementos de uma lista, de acordo com um filtro definido. Por exemplo, a lista de elementos filhos da div “container” é composta por duas divs e um parágrafo. Se aplicarmos o filtro “div”, na função not, obteremos a lista com os elementos do tipo div removidos, ou seja, apenas o parágrafo.

Vejamos então esse exemplo na prática, facilitando a compreensão.

Listagem 6: Exemplo de uso da função not

$(function(){
	$("#container").children().not("div").addClass("destaque");
});

Como se vê no código acima, a partir da lista de elementos filhos da div “container” filtramos aqueles que não atendem ao filtro “div”, ou seja, que não são desse tipo, e adicionamos a eles a classe CSS “destaque”.

Abrindo o arquivo no browser, verificaremos que o parágrafo (elemento central) teve a cor do plano de fundo definida como amarelo.

has

A nomenclatura dessa função é bastante sugestiva. Do termo em inglês “has” ou “tem” em português, indica que a função retorna os elementos de uma lista que TÊM/POSSUEM um determinado elemento filho.

Para exemplificar, poderíamos filtrar os elementos filhos da div “container” que contém um filho do tipo span. Facilmente percebemos que o único elemento selecionado seria a primeira div, a “div1”. O código a seguir mostra esse exemplo na prática.

Listagem 7: Exemplo de uso da função has

$(function(){
	$("#container").children().has("span").addClass("destaque");
});

Nesse caso, somente a primeira div terá a cor do background alterada.

Conclusão

As funções aqui apresentadas não são as únicas da biblioteca, mas são as mais utilizadas e de mais fácil compreensão. Para complementar os conhecimentos a respeito da jQuery, sugiro a leitura destes outros artigos: http://www.linhadecodigo.com.br/colaborador.aspx?id=676. Agradeço a atenção do leitor. Até aproxima!
Joel Rodrigues

Joel Rodrigues - Técnico em Informática - IFRN Cursando Bacharelado em Ciências e Tecnologia - UFRN Programador .NET/C# e Delphi há quase 3 anos, já tendo trabalhado com Webservices, WPF, Windows Phone 7 e ASP.NET, possui ainda conhecimentos em HTML, CSS e Javascript (JQuery).