jQuery: O Selector Next

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. :D

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

<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="third-item" style="color:lime">list item 3</li>
   <li>list item 4</li>
   <li>list item 5</li>
</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

<script>
$('li.third-item').next().css('background-color', 'red');
</script>

Simples, não parece? 8)

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. :-F

Queres ler outro artigo ao calhas?