1

Numa página, existem links que apontam para imagens.

<a class="native-class" href="http://localhost/test/wp-content/uploads/2017/10/7-3.jpg"></a>

Estou ciente de que poderia adicionar outra classe utilizando a classe native-class mas o que eu quero fazer é adicionar outra classe nesse link especifico caso o href seja uma imagem. .png, jpg, gif etc.

5
  • Fiz uma resposta mas fiquei na dúvida. O que quer dizer com "link específico"?
    – Sam
    Commented 31/03/2018 às 22:21
  • @dvd esse é o comentário que eu estava escrevendo quando você removeu a resposta rsrsr. Sim, é uma solução elegantíssima! Mas de fato, o que eu gostaria é de utilizar como paramento apenas o valor href caso seja ['jpg','png','gif','svg'], é porque essa classe native-classe não existirá sempre, só a coloquei para exemplificar. Commented 31/03/2018 às 22:23
  • @dvd Quero que caso um link possua no href o endereço para uma imagem, adicionar uma classe. Commented 31/03/2018 às 22:25
  • @dvd sua resposta estava certa e resolvia o problema caso eu fosse utilizar a classe native-classe. A base para colocar a classe deve ser sempre o valor do href. Commented 31/03/2018 às 22:26
  • 1
    Restaurei a resposta editada
    – Sam
    Commented 31/03/2018 às 22:28

2 Respostas 2

1

Pode fazer desta forma, percorrendo todos os links:

var links = document.querySelectorAll("a");

for(var x=0; x<links.length; x++){
   
   if(links[x]
   .href // pego o valor do href
   .split(".") // quebro o valor
   .pop() // pego a extensão
   .match(/jpg|gif|png/)) // comparo
   links[x].classList.add("nova-class"); // adiciono a classe
   
}
<a class="native-class" href="http://localhost/test/wp-content/uploads/2017/10/7-3.jpg">Link 1</a>
<a class="native-class" href="http://localhost/test/wp-content/uploads/2017/10/7-3.tiff">Link 2</a>

Separe os nomes da extensões desejadas na regex do match por uma barra vertical |.

0

Um "pitaco" aqui, acho mais sucinto:

document.querySelectorAll('a').forEach(link => {
    if ( /\.(jpg|png|gif)/g.test(link.href) ) {
        link.classList.add('nova-classe')
    }
    // mostrar
    console.log(link.classList.toString())
})
<a class="native-class" href="http://localhost/test/wp-content/uploads/2017/10/7-3.jpg">jpg</a>
<a class="native-class" href="http://localhost/test/wp-content/uploads/2017/10/7-3.png">png</a>
<a class="native-class" href="http://localhost/test/wp-content/uploads/2017/10/7-3.gif">gif</a>
<a class="native-class" href="http://localhost/test/wp-content/uploads/2017/10/7-3.webp">webp</a>
<a class="native-class" href="http://localhost/test/wp-content/uploads/2017/10/7-3.svg">svg</a>

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 .