And After - Design e Tecnologia por Sua Conta!
O desenvolvedor é um blog sobre desenvolvimento web, não tratando apenas de programação mas também compartilhando experiências, métodos, debates e tendências da internet.

O Desenvolvedor é um blog de www.andafter.org
Assinar o Feed RSS

Guilherme Serrano

[@]
[www]

Graduado em design, viciado em web, adoro desenvolvimento, mashups, usabilidade, o universo e tudo mais.

Vivo de e para internet. :)

Status
Karma: 49506
Opiniões: 30

Mais deste autor


Como criar seletores customizados com jQuery

Como criar seletores customizados com jQuery

Muito bomEste texto foi classificado como Muito bom
Em Internet, Programação
Por Guilherme Serrano
8 de Outubro de 2009

Você sabia que é possível customizar seletores do jQuery, para por exemplo buscar todos os elementos que contenham algum HTML, ou que tenham determinado elemento (rel, title, etc). Possibilidades infinitas com jQuery! ;)

RSS Acompanhe O Desenvolvedor por Feeds!


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 ;)

O que você achou do texto?

  • Muito ruim
  • Ruim
  • Regular
  • Bom
  • Muito bom
Sua opinião é o que faz a comunidade funcionar, colabore para isso!

Tags: jquery, javascript, selectors, programacao, internet

Enviar para um amigo
Você pode comentar, assinar o feed, conhecer mais sobre o autor e ajudar a divulgar este artigo em sua ferramenta favorita através dos botões abaixo.
  • Rec6
  • ueba
  • linkk
  • dihitt
  • linkloko
  • websapiens
  • linkto
  • Eu curti

Comentários

Guilherme Serrano

9/10/2009 13:45:00

Obviamente ontem de noite esqueci de subir os exemplos, agora só... terça-feira, pois esse final de semana deve ser offline :D

[Responder este comentário]

Luan Muniz
[www]

15/10/2009 08:33:00

Eu realmente não vejo muita necessidade disto.
Para este resultado é muito mais facil usar a[href*="wikipedia.org"] ou algo parecido

Enfim, achei um pouco inutil, mas bem legal
É um conhecimento a mais =P

[Responder este comentário]

Guilherme Serrano
[www]

15/10/2009 09:48:00

Oi Luan! O seletor que usei de exemplo foi simples apenas para mostrar a funcionalidade de criar o seletor customizado. Você pode fazer verificações complexas como por exemplo: selecionar apenas elementos com o index maior que X, se o elemento tiver a classe Y e ainda tiver dentro dele (children) uma imagem com largura maior que 500. Vai do conhecimento e da criatividade (e necessidade) do desenvolvedor, se você for ficar preso aos exemplos de estudo vai achar quase tudo inútil! ;)

Deixe seu comentário!

Nome (requerido)

E-mail (requerido - não será divulgado)

URL

Quanto é 8 + 3?




web tracker