Pick up and save a Class by specifying only the beginning of it

Question

Hey, how you doing? I would like to store in a variable, among several classes of this example, the class that begins with SHOWCASE. I don’t want to store html. I want to store the class name!

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

My goal is for example, through script, to create a new element and give an append by placing it inside the tag < a > repeating the respective link of each tag. The result would be + - like this:

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

In my reciocínio... storing the only class that differs from the others, I can pass it to Jquery by agglutination and so, both get the href and the correct element and Assign to a child, the same href of the Father element.

Thanks for your help!

Answer 1

Well, to search all the elements that contain a class containing a certain word you can do the following:

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

In this way, in elements you will have an array with all objects that have some content class showcase name. From there you can make a filter to return what you need.

However, I think it would be better if you used the custom date attribute, such as:

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

But of course this should be considered in its context. I wonder why you don’t look for the element exactly for the class you need instead of grouping the similarities before... I hope it helps.