jQuery: O Selector Next

Publicada originalmente em 1 de Setembro de 2012.
Texto corrigido e actualizado com novas ligações.

Osvaldo

Mocheco⊗Marafado

Hoje vou tentar explicar algumas coisitas sobre o jQuery e como foi útil na solução para um problema que me deparei na altura em que publiquei este artigo originalmente.

Havia pouco tempo que tinha descoberto o jQuery, mas praticamente nunca mais utilizei outro tipo de biblioteca JavaScript e até agora ainda não arrependi disso.

Eu precisava de um script que "apanhasse" o ID seguinte ao elemento que eu tinha os dados...

Mas vamos por partes. Para apanhar/detectar o ID a seguir ao elemento a que eu tinha acesso, resolvi utilizar o selector .next().

O que este selector faz é "apanhar" o elemento a seguir ao que temos os dados e aí já lhe podemos fazer alguma coisa.

Para melhor entenderem, aqui fica o exemplo da pagina do selector .next() (nota: podem ver mais exemplos na pagina do selector), utilizando uma lista simples em que só uma das lis tem uma class:

• list item 1
• list item 2
• list item 3
• list item 4
• list item 5

ver código

imprimir?

1

<ul>

2	<li>list item 1</li>

3	<li>list item 2</li>

4	<li class="third-item" style="color:lime">list item 3</li>

5	<li>list item 4</li>

6	<li>list item 5</li>

7

</ul>

E colocando o script abaixo, para que a li a seguir (do item 4) fique com um fundo vermelho:

• list item 1
• list item 2
• list item 3
• list item 4
• list item 5

ver código

imprimir?

1

<script>

2	$('li.third-item').next().css('background-color', 'red');

3

</script>

Simples, não parece?

E é. Mas actualmente já temos os meios para obter quase o mesmo efeito somente com CSS.

Talvez em breve eu escreva como funciona com CSS.

Mas para quem prefere javascript, esta maneira talvez seja mais fácil de entender e quiçá, descobrir como adaptar algum dos exemplos apresentados a alguma situação específica tal como eu o fiz no meu caso.

E por hoje é tudo.

Até breve.

Queres ler outro artigo ao calhas?