Dia desses estava estudando os seletores do jQuery e nas pesquisas internérdicas encontrei um post bastante interessante sobre seletores customizados do jQuery. Isso significa que eu posso criar uma regra em javascript para praticamente verificar qualquer coisa dos elementos, e utilizar isso como um selector do jQuery.

Exemplo de uso

Tenho um site com diversos links para a wikipedia e gostaria de aplicar uma classe nos links específicos para a wikipedia. Eu posso colocar a classe para cada link criado, mas vamos supor que eu quero automatizar isso (para aplicar a aregra também em links antigos, por exemplo).

A idéia é eu criar um seletor tipo:

$("a:wikipedia").addClass("wikipedia")

Este seletor não existe no jQuery, então vamos ao objetivo do post: criar um seletor customizado. Para extender (não sei se esta seria a palavra correta) e jQuery e criar um seletor customizado o comando á:

$.expr[":"].nomedoseletor = function(obj){
   //Aqui vão as regras
   //return true inclui o elemento no seletor
   //return false
};

 

No meu caso, a regra é simples: quero que o seletor procure links que contenham em alguma parte de sua href o link "wikipedia.org". Para a regra resolvi utilizar expressões regulares (ER), e o nome do meu seletor é wikipedia.

 

Seletor customizado com jquery

Eis o código:

$.expr[":"].wikipedia = function(obj){
   return obj.href.match(/wikipedia.org/);
};

 

E para chamar o seletor:

$("a:wikipedia").addClass("wikipedia")

 

O Chris já alertou que isso não deve ser muito performático, mas tenho que dizer: pode ser bastante útil. Neste exemplo fiz um seletor simples, mas as regras podem ser mais complexas: selecionar links internos, links para áreas específicas do seu site para aplicar ícones nos links, selecionar imagens pelo tamanho, elementos com ou sem atributos específicos…

Ainda sobre a performance, recomendo utilizar seletores específicos preferencialmente dentro de ID´s, poe exemplo: $("#content a:wikipedia") e não "globalizar" os apenas quando necessário não deve causar TANTOS problemas, né?

Não realizei nenhum teste de performance com os seletores customizados, testei apenas o códido de exemplo, funcionou certinho. Hoje a noite quando eu estiver em casa publico o exemplo* no diretório de exemplos do O Desenvolvedor! 🙂

 

Referência: jQuery howto (recomendo a leitura, vários posts interessantes)

 

* resolvi postar mesmo sem o exemplo devido a simplicidade do código 😉