singuska :: JavaScript

Uma importante novidade do jQuery 1.4 foi a melhoria do método index. Este método retorna um número inteiro que indica a posição de um determinado elemento do DOM em relação aos seus irmãos. A primeira posição é 0. Caso o elemento não seja encontrado -1 é retornado. A documentação completa deste método pode ser encontrada aqui.

Ele é muito útil porque geralmente determinados objetos de uma página possuem algum tipo de relação que os agrupa. Vamos imaginar a seguinte estrutura:

1
2
3
4
5
6
7
8
9
10
11

	<ul id="menu">
	    <li><a href="#">Capítulo 1</a></li>
	    <li><a href="#">Capítulo 2</a></li>
	    <li><a href="#">Capítulo 3</a></li>
	</ul>
 
	<div id="capitulos">
	    <div>Conteúdo capítulo 1</div>
	    <div>Conteúdo capítulo 2</div>
	    <div>Conteúdo capítulo 3</div>
	</div>

Um item de menu, ao ser clicado, faz com que seu respectivo conteúdo seja mostrado na tela. Todas as divs de conteúdo estão inicialmente escondidas. Se um item de menu for clicado novamente, todas as divs são escondidas e a div de conteúdo correspondente é revelada. Uma situação muito comum, trivial e extremamente recorrente. O código abaixo implementa a situação:

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

var gerenciarCapitulos = function(){
	$('#menu li a').click(function(e){
		e.preventDefault();
		var indice = $(this).index('#menu li a');
		mostrarConteudo(indice);
	});
};
 
var mostrarConteudo = function(indiceCapitulo){
	var 
	capitulos = $('#capitulos div'),
	divCapitulo = $(capitulos[indiceCapitulo]);
 
	capitulos.hide();
	divCapitulo.show();
};
 
$(function(){
	gerenciarCapitulos();
});

Index é utilizado na linha 4:

4

		var indice = $(this).index('#menu li a');

Neste caso index recebe como argumento um seletor que indica o contexto que deve ser utilizado para descobrir o índice em relação a this (ou seja, o elemento clicado). Como os items de menu estão na mesma sequência das divs de capítulos o índice acaba sendo o mesmo. O valor do índice é passado para a função mostrarConteudo que recupera do vetor capitulos a div que deve ser mostrada:

12

	divCapitulo = $(capitulos[indiceCapitulo]);

Aqui você pode encontrar o exemplo funcionando.

Um exemplo ruim que não utiliza o método index

É possível programar a mesma funcionalidade de várias outras maneiras sem a utilização de index. Antes eu contava com “ids” que tivessem números em comum. Entretanto, isso implicava em mais código html:

1
2
3
4
5
6
7
8
9
10
11

	<ul id="menu">
	    <li id="link-1"><a href="#">Capítulo 1</a></li>
	    <li id="link-2"><a href="#">Capítulo 2</a></li>
	    <li id="link-3"><a href="#">Capítulo 3</a></li>
	</ul>
 
	<div id="capitulos">
	    <div id="capitulo-1">Conteúdo capítulo 1</div>
	    <div id="capitulo-2">Conteúdo capítulo 2</div>
	    <div id="capitulo-3">Conteúdo capítulo 3</div>
	</div>

Percebam que agora todos as lis de menu e todas as divs de capítulo possuem ids. O código JavaScript correspondente:

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

var gerenciarCapitulos = function(){
	$('#menu li a').click(function(e){
		e.preventDefault();
		var indice = $(this).parent().attr('id').split('-')[1];
		mostrarConteudo(indice);
	});
};
 
var mostrarConteudo = function(indiceCapitulo){
	var 
	capitulos = $('#capitulos div'),
	divCapitulo = $('#capitulo-' + indiceCapitulo);
 
	capitulos.hide();
	divCapitulo.show();
};
 
$(function(){
	gerenciarCapitulos();
});

Somente as linhas 4 e 12 foram modificadas. Na linha 4 utilizamos um split para obter o índice. Na 12 um seletor é montado dinamicamente utilizando este índice. É um código fraco e pouquíssimo elegante. Exemplo ruim pode ser encontrado aqui.