How to addClass as per the link content?

Question

I have one content page where there are links to different documents like .doc, .docx, .ppt .pptx, .txt.

I want to apply/add class dynamically not manual. like as per the link content.

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

This is manual class I applied.

jQuery solution will be prefered.

If you like my Question fav it. :) thank

Answer 1

Try this:

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

Answer 2

I know this isn't exactly what you asked for, but why not do this:

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

This way you don't technically need to use JavaScript, the CSS is intelligent enough to interrogate the href attribute and apply the appropriate CSS properties.

Consider having a look at this article.