11

O seletores de classe como .exemplo ou seletores separados por espaçamento [atributo~=valor] se comportam totalmente diferente de seletores como:

  • [atributo=valor]
  • [atributo*=valor]
  • [atributo^=valor]

O .exemplo e [atributo~=valor] buscam valores separados por espaços. O que eu preciso é de um seletor customizado com jQuery.expr para buscar valores separados por espaços, mas que seja possível usar caractere wildcard semelhante ao % do LIKE em mysql (https://dev.mysql.com/doc/refman/8.0/en/string-comparison-functions.html#operator_like).

A ideia é fazer algo como (semelhante):

$(".js-use-?").length //Retorna 4

Ou semelhante:

$("[class~=js-use-?]").length //Retorna 4

Ele pegaria qualquer classe que tive-se js-use-2, js-use-palavraqualquer, js-use-3, etc.

No caso o ? será o wildcard, mas poderia usar % também, por exemplo:

$(".js-use-%").length //Retorna 4

Ou então

$(".foo-%-hello").length

O caractere wildcard é irrelevante, pode ser qualquer coisa, desde que o comportamento de valores separados por espaços seja o mesmo que os seletores já citados .exemplo e [atributo~=valor]

Note: o seletor por ponto (.) não pega apenas atributos como <div class="foo">, ele pega também <div class="alpha foo betha">, ou seja ele pega o atributo dividido por "espaço". Mais detalhes em http://www.w3.org/TR/css3-selectors/#class-html

Isto é possível com jQuery?

2

4 Respostas 4

7

Nota: Não faço ideia o que quer dizer "coringa" mas vou usar essa palavra no exemplo desta resposta.

O jQuery não faz isso naturalmente. Mas dá para extender o pseudo seletor : para fazer isso.

A funcionalidade poderia ser: :coringa(<atributo>, <string com "?">).

O jQuery gauarda os métodos para pseudo seletores em jQuery.expr[':'] e podes criar um novo simples criando uma nova propriedade nesse objeto.

A esse novo método é passado pelo Sizzle/jQuery o elemento, o index entre os seus siblings e o que está dentro desse pseudo-seletor como ultimo argumento.

O código para fazer isso seria assim:

jQuery.expr[':'].coringa = function(elem, index, match) {
    var parametros = match[3].split(' ').join('').split(',');
    var attr = parametros[0];
    var regexString = parametros[1].replace('?', '([a-zA-Z_\\-0-9]+)');
    var regex = new RegExp(regexString, 'ig');
    return regex.test(jQuery(elem).attr(attr));
}

E depois usar assim:

$(':coringa(class, js-?-empty)').css('color', 'red');

jsFiddle: http://jsfiddle.net/9br4Lt3p/

6
  • 2
    Coringa é o mesmo que Curinga: Caracter, geralmente um asterisco (*), que pode representar qualquer outro caracter 17/07/2015 às 12:01
  • 1
  • Coringa é muito usado no Brasil, por adaptação por causa do personagem do Batman, mas o correto mesmo é curinga, já corrigi o titulo na pergunta.
    – Syzoth
    17/07/2015 às 14:58
  • Haha, esse pt.se vai dar muito jeito aqui :) Podiamos abrir uma filial lá para termos de código :)
    – Sergio
    17/07/2015 às 15:00
  • 1
    @GuilhermeNascimento vi somente agora a tua resposta, não tive tempo antes para ver com mais cuidado. ++
    – Sergio
    16/08/2018 às 18:29
2

Infelizmente todas outras respostas estão erradas, conseguiram o comportamento do curinga/wildcard, mas não entenderam que o comportamento tem que ser como é o seletor .classe, assim como é em CSS2, CSS2.1 e CSS2.2

Tanto o seletor .classe quanto o seletor de atributo [atributo~=valor] não se comportam como seletores de atributo normal, eu expliquei e frisei isso bem na pergunta, neste ponto:

Note: o seletor por ponto (.) não pega apenas atributos como <div class="foo">, ele pega também <div class="alpha foo betha">, ou seja ele pega o atributo dividido por "espaço". Mais detalhes em http://www.w3.org/TR/css3-selectors/#class-html

Aliais segue o link da documentação básico para quem esta aprendendo CSS e quer entender as diferenças (ou confirmar o que eu digo):


A solução

Para fazer um seletor que se comporte como o seletor de classes (ou este seletor [atributo~=valor]) do CSS com caractere wildcard semelhante ao % do LIKE em Mysql

A solução que cheguei irá se comportar como .class ou como , ficou assim:

//Seletor customizado
jQuery.expr[':']['class-wildcard'] = function (elem, index, match) {

    //Separa as partes da string
    var parse = $.trim(match[3]).split('?');

    //Escapa os caracteres necessários
    for (var i = 0, j = parse.length; i < j; ++i) {
        parse[i] = parse[i].replace(/[-\][*+?)(:\\]/g, '\\$&');
    }

    // Gera a regex em formato de string
    var cls = '\\b' + parse.join('\\S+') + '\\b';

    return new RegExp(cls).test(elem.className);
};

console.log(":class-wildcard(js-use-?) -> ", $(":class-wildcard(js-use-?)").length);

console.log(":class-wildcard(foo?bar) -> ", $(":class-wildcard(foo?bar)").length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- abaixo será com o seletor :class-wildcard(js-use-?) -->
<div class="foo js-use-1"></div>     <!-- será pego -->
<div class="js-use-2 bar"></div>     <!-- será pego -->
<div class="baz js-use-3 boo"></div> <!-- será pego -->
<div class="js-use-empty"></div>     <!-- será pego -->

<div class="foo wjs-use-1"></div>     <!-- NÃO será pego -->
<div class="xjs-use-2 bar"></div>     <!-- NÃO será pego -->
<div class="baz yjs-use-3 boo"></div> <!-- NÃO será pego -->
<div class="zjs-use-empty"></div>     <!-- NÃO será pego -->


<!-- abaixo será com o seletor  :class-wildcard(foo?bar) -->
<div class="foobazbar"></div>             <!-- será pego -->
<div class="fooxyzbar"></div>             <!-- será pego -->
<div class="fooabcbar"></div>             <!-- será pego -->
<div class="col1 foobazbar"></div>        <!-- será pego -->
<div class="col2 fooxyzbar custom"></div> <!-- será pego -->
<div class="fooabcbar col3"></div>        <!-- será pego -->
<div class="fooar col4"></div>            <!-- NÃO será pego -->

Explicando o código

Para explicar melhor o código, o parse divide strings em arrays, assim:

  • js-use-? vira ["js-use", ""]
  • foo?bar vira ["foo", "bar"]

Desta forma é possível aplicar o "escape" nos caracteres que poderiam afetar a que ocorre dentro do for():

parse[i] = parse[i].replace(/[-\][*+?)(:\\]/g, '\\$&');

Então depois ele junta com .join os arrays novamente usando como separador o \S+ que será o curinga/wildcard no caso, a expressão \S ("s" em maiúsculo) é a negação de \s, ou seja o coringa pode ser qualquer coisa menos espaço, tab ou quebra de linha.

Note que também foi usado \b nas extremidades, um expresão assim:

\bfoobar\b

Seria "semelhante" a isto:

(^|\s)foobar($|\s)

Ou seja, o valor testado na regex deve começar e terminar com a palavra da expressão, ou deve conter espaços.

Então após o join os parâmetros teriam resultados como este:

  • js-use-? vira esta regex /\bjs-use-\S+\b/
  • foo?bar vira esta regex /\bfoo\S+bar\b/
  • a?b?cde?xyz? vira esta regex /\ba\S+b\S+cde\S+xyz\S+\b/
1
  • 1
    +1 pelo esclarecimento
    – Jorge.M
    16/08/2018 às 19:55
0

Você pode fazer desta maneira que também funciona:

$(function() { 
    $('div').each(function() {
               var classes = $(this).attr('class');
               var arrClass = classes.split(' ');
                   arrClass.forEach(function(value, key) {
                      if ( value.indexOf('js-use') !== -1) {
                         $('.'+value).css('color','red');
                      }
                  });
    });
});

Aqui o jsFiddle: http://jsfiddle.net/ivanferrer/9br4Lt3p/2/

0

Como já responderam, o jQuery usa os seletores que você mencionou:

^= starts with (começar com);
$= ends with (terminar com);
*= contains (contém);

Nativamente são esses, mas existem extensões que permite usar coringas, ou wild cards, como essa por exemplo: jquery-wildcard-selector

Permite fazer coisas como:

$(':withWildcard(name, foo-*-*)')

E no seu exemplo, selecionando uma classe (como está na pergunta: $(".js-use-?") fica assim: $(':withWildcard(class, js-use-*)')

5
  • 1
    Caro Ricardo eu quero resolver para classes e não para atributos, o comportamento é diferente. Eu escrevi na recompensa: "Aguardo mais sugestões que de preferencia se comportam como classe e não como atributo", ou seja classes não se comportam como atributos, o que eu quero é outra coisa. Por favor se puder editar a resposta para o que é pedido na pergunta eu ficaria agradecido.
    – Syzoth
    9/08/2018 às 19:48
  • @GuilhermeNascimento, eu tinha colocado um exemplo mas não estava claro, editei a pergunta e coloquei o exemplo específico para um seletor por classe, por favor veja se é o que você procura senão preparo um outro exemplo. Obrigado por apontar 9/08/2018 às 20:01
  • Caro Ricardo, o problema é que classe não é atributo, da forma que você fez se comporta como atributo, você consegue entender como funciona "o seletor de classes"? Sabe que ele funciona bem diferente de seletor de atributos né? Não basta passar :withWildcard(class ai o comportamento é como de um atributo normal, não adianta de nada com o que é pedido na pergunta, aliais o unico seletor CSS (e querySelector) é o [atributo~="..."]. Talvez isso já ajude a você ter uma ideia.
    – Syzoth
    9/08/2018 às 20:06
  • Sim entendi @GuilhermeNascimento, realmente acaba se comportando diferente, ainda mais você precisar juntar algo como + elemento ou > elemento não vai funcionar corretamente 9/08/2018 às 23:01
  • Eu fico grato pela sua tentantiva, mas sua resposta não passou nem perto, pelo que eu já disse, isso $(".js-use-?") não é a mesma coisa que $(':withWildcard(class, js-use-*)'), o comportamento é totalmente diferente, eu elaborei uma resposta pt.stackoverflow.com/a/322698/3635, se lhe interessar.
    – Syzoth
    16/08/2018 às 18:23

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .