0

Olá, tudo bem? Eu gostaria de armazenar em uma variável, dentre varias classes deste exemplo, a classe que começa com VITRINE. Não quero armazenar o html. Quero armazenar o nome da classe!

<a class = "classe1 classe2 vitrine-12457" href="link01">Conteudo 1</a>
<a class = "classe1 vitrine-12458 classe3" href="link02">conteudo 2</a>
<a class = "classe1 vitrine-12459 classe3 classe4" href="link03">Conteudo 3</a>

O meu objetivo é por exemplo, através de script, criar um novo elemento e dar um append colocando-o dentro da tag < a > repetindo o link respectivo de cada tag. O resultado ficaria + - assim:

<a class = "classe1 classe2 vitrine-12457" href="link01">Conteudo 1
   <span href="link01">
      conteudo do span
   </span>
</a>
<a class = "classe1 vitrine-12458 classe3" href="link02">conteudo 2
   <span href="link02">
      conteudo do span
   </span>
</a>
<a class = "classe1 vitrine-12459 classe3 classe4" href="link03">Conteudo 3
   <span href="link01">
      conteudo do span
   </span>
</a>

No meu reciocínio... armazenando a unica classe que difere das outras, eu consigo passa-la pro Jquery por aglutinação e assim, tanto conseguir pegar a href como também o elemento correto e Atribuir a um filho, o mesmo href do elemento Pai.

Desde já agradeço a ajuda!

3
  • 1
    Mas você vai fazer uma query para encontrar um elemento e armazenar o nome da classe para então fazer outra query para encontrar novamente o elemento que você já tinha encontrado? Coloque o código que você pretende utilizar com um comentário na parte que está faltando.
    – Andre
    7/05/2019 às 20:57
  • Sua pergunta está pouco clara. Por favor, explique melhor o que deseja fazer (tente utilizar outras palavras). 7/05/2019 às 21:19
  • Eu editei! Acho que ficou mais claro... ^^'
    – Ivan Gomes
    7/05/2019 às 22:31

1 Resposta 1

1

Bem, para buscar todos os elementos que contenha uma classe contendo determinada palavra você pode fazer o seguinte:

let elementos = [...document.querySelectorAll('[class*="vitrine"]')];

Desta forma, em elementos você terá um array com todos os objetos que possuem alguma classe contento vitrine no nome. Daí pode fazer um filtro para retornar o que precisa.

Porém, acredito que seria melhor você usar o atributo personalizado data, como:

<a href="#"... data-vitrine="1234">bllbl</a>

Mas claro que isso deve ser considerado no seu contexto. Me pergunto porque você não busca o elemento exatamente pela classe que precisa ao invés de agrupar as semelhanças antes... Espero que ajude.

5
  • 1
    Essa query só irá funcionar se o atributo class começar com vitrine. Não funciona se vitrine estiver declarado no meio da classe. Para este caso seria necessário utilizar class*="vitrine".
    – Andre
    7/05/2019 às 21:33
  • Você está certíssimo. Falta de atenção minha. Obrigado pela correção. Editando a resposta para corrigir a informação. 7/05/2019 às 21:39
  • Isso também funciona atribuindo um seletor css? tipo: querySelector("#listagemProdutos[class*="vitrine"])?
    – Ivan Gomes
    7/05/2019 às 22:40
  • 1
    Sim, você pode implementar a política de seletor que precisar no querySelector. 8/05/2019 às 13:51
  • 1
    Deu certo! Obrigado! :>
    – Ivan Gomes
    9/05/2019 às 17:01

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 .