Как добавить класс по содержанию ссылки?

Question

У меня есть одна страница контента, где есть ссылки на различные документы, такие как .doc, .docx, .ppt .pptx, .txt.

Я хочу применять / добавлять класс динамически, а не вручную. как согласно содержанию ссылки.

<h3><a href="document.pdf" class="pdf-file">Document.pdf</a></h3>
.pdf-file {
background:url(../images/pdf-file.png) right center no-repeat; padding-right:18px;
}

Это ручное приложение класса I.

Решение jQuery будет предпочтительным.

Если тебе нравится мой вопрос, то поприветствуй его. :) спасибо

Answer 1

Я знаю, это не совсем то, что вы просили, но почему бы не сделать это:

a[href*=".pdf"].icon {
    background:url(../images/pdf-file.png) right center no-repeat; padding-right:18px;
}

Таким образом, технически вам не нужно использовать JavaScript, CSS достаточно умен, чтобы опросить атрибут href и применить соответствующие свойства CSS.

Подумайте над тем, чтобы взглянуть на эту статью .

Answer 2

Попробуйте это:

$(document).ready(function() {
  $('a[@href$=".pdf"]').addClass('pdflink');
  $('a[@href$=".doc"]').addClass('doclink');
  $('a[@href$=".docx"]').addClass('docxlink');
  $('a[@href$=".ppt"]').addClass('pptlink');
  //etc
});