Как присвоить класс только к ссылке на картинку с помощью JS?

Question

[TitNIk]

Доброго вечера. Нужно присвоить определенный класс к ссылке на изображение в определенном классе )) Если проще, как на JS определить, является ли ссылка на изображение или нет? Заранее спасибо!

Comments

[kulaeff]

Не понял, нужно определить ведет ссылка на изображение или нет?

[TitNIk]

kulaeff: Верно ) Мне требуется присвоить класс ссылкам на странице, но только тем, которые ведут на изображение )

Answer 1

[Олег]

Примерно так на чистом js https://jsfiddle.net/uh06Ljum/

Answer 2

[artem78]

Если URL ссылки содержит расширение файла, то можно так:
jQuery('a[href$=".jpg"]').addClass('newClass');

Answer 3

[Stalker_RED]

Ссылки на картинку могут быть и без расширения.
пример http://lorempixel.com/400/200/sports/

Тогда как-то так:

$('a').each(function(){
  var $link = $(this)
  var url = this.href;
  var xhr = new XMLHttpRequest();
  xhr.open('HEAD', url);
  xhr.onreadystatechange = function() {
    if (this.readyState == this.DONE || this.readyState == this.HEADERS_RECEIVED) {
      var contentType = xhr.getResponseHeader("Content-Type")
      if (contentType.substr(0, 5) == 'image') {
        $link.addclass('myClass')
      }
    }
  };
  xhr.send();  
})

Если вы уверены, что у ссылок будут расширения, то можно вообще без скриптов, на css.

a[href$=".png"],
a[href$=".gif"],
a[href$=".jpeg"],
a[href$=".bmp"] {
  border: solid 2px orange;
}

Comments

[TitNIk]

Проблему решил. Класс нужно было присвоить для корректной работы fancybox (на странице могли быть и изображения с ссылкой не на оригинал, а на другую страницу). Но, пример со стилями мне понравился, буду иметь ввиду, что так можно )