Selecionar elementos que o ID contenha uma string

No exemplo abaixo vamos levar em conta que temos um sistema qualquer que tenha o seu conteúdo divido em abas. Logo nestas abas, ao clicarmos em uma automaticamente as outras irão ser ocultadas e a selecionada irá ter o seu conteúdo apresentado.

A estrutura HTML seria a seguinte:

Daí depois temos as caixas de conteúdos, estas serão mostradas ou ocultadas conforme a aba selecionada.

A estrutura HTML das caixas HTML seria a seguinte:

Neste tutorial não será comentado o emprego de CSS, logo porque o foco do tutorial é o JQuery. :)

O nosso próximo passo é configurar os Javascripts necessários. Este exemplo é bem simples, logo você precisa apenas do JQuery e um arquivo JS para escrever as suas próprias funções.

Vamos considerar que já temos um arquivo *.PHP ou *.HTML. A classe Javascript para o controle das abas é a seguinte:

Vamos compreender o que temos no método selecionaAba da classe JS AjaxAmbiente.

Para chamar a função ‘each’ do JQuery foi carregado todos as DIV´s que tenham o seu ID começando com ‘conteudo-aba’. Como a base desse tipo de seleção é por expressão regular, temos a explicação que o ‘*’ é para selecionar qualquer elemento que começe ou termine com a palavra ‘conteudo-aba’, caso quisessemos que fosse buscados os elementos que começassem com alguma coisa utilizariamos o caracter ‘^’ e para que terminasse com uma palavra seria o ‘$’.

No ‘if’ dentro da função each e utilizada uma expressão regular para simular uma função endsWith, logo temos:

No Javascript toda string é um objeto String ‘obviamente’, assim podemos chamar diretamente a função match para comparar se a DIV atual da iteração da função each é equivalente a aba selecionada, no caso um elemento <a> clicado.

Caso seja a DIV a ser apresentada, a mesma é exibida utilizando um efeito ‘fade’, no mesmo caso para ao ocultar as outras DIV´s.

Este é um exemplo simples e que mostra uma pequena parte do JQuery e suas aplicações, você poderá estar utilizand chamadas AJAX (JQuery.post() ) para carregar conteúdos dinamicamente dentro das suas abas, e por ai vai…

Um abraço a todos e até a próxima.

Javascript