如何根据链接内容添加类？

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

这是我申请的手工课。

首选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
});