Hoje estava conversando com um amigo que tinha uma dúvida sobre jQuery: ele tinha uma estrutura semelhante à esta:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

	<a href="" id="link_novidades">Novidades</a>
	<div>
		<p>Uma pagina com novidades</p>
	</div>
 
	<br>
 
	<a href="" id="link_downloads">Downloads</a>
	<div>
		<p>Uma pagina com downloads</p>
	</div>
 
	<br>
 
	<a href="" id="link_contato">Contato</a>
	<div>
		<p>Uma pagina com contato</p>
	</div>

E queria que, ao clicar no link, a div que aparece abaixo dele no código fosse exibida ou ocultada, como no exemplo que vocês podem ver aqui. Isto poderia ser feito com IDs ou classes, porém dependendo do caso poderia ficar chato definir IDs ou classes para cada uma das DIVs.

A dúvida principal é, então: como buscar o próximo elemento no código com jQuery? A solução foi utilizar o seletor com sinal de “+“. Digamos que eu queira em um CSS da vida buscar a div imediatamente após um determinado elemento de ID “#elemento“, isso seria feito da seguinte forma:

#elemento + div

Assim, a div que aparece no código logo após o #elemento seria selecionada. Com jQuery, podemos fazer algo bem parecido, ficando o código para nosso exemplo que citei no começo do post assim:

1
2
3
4
5
6

$(function(){
	$("a").click(function(){
		$("#"+$(this).attr("id")+" + div").toggle()
		return false
	})
})

Refatorando este código, temos:

1
2
3
4
5
6
7
8

$(function(){
	$("a").click(function(){
		var id = $(this).attr("id")
		$("#"+id+" + div").toggle()
 
		return false
	})
})

Aí está, um exemplo bem simples de como seleções com “+” funcionam. Lembrando que no exemplo eu usei o atributo ID do link, mas você pode utilizar qualquer outro atributo que seja único àquele link (href, por exemplo). Espero que vocês tenham compreendido ele, e passem a utilizá-lo para seu benefício

Até mais!