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

我有一个内容页，其中有指向不同文档的链接，如.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;
}

.pdf文件{
背景：url（../images/pdf file.png）右中无重复；右填充：18px；
}

这是手动一级应用

首选jQuery解决方案

如果你喜欢我的问题，请发自内心。：） 谢谢

试试这个：

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

试试这个：

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

---

我知道这不是你想要的，但为什么不这样做：

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

通过这种方式，您在技术上不需要使用JavaScript，CSS足够智能，可以查询

href

属性并应用适当的CSS属性

---

考虑一次。

我知道这不是你想要的，但为什么不这样做：

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

通过这种方式，您在技术上不需要使用JavaScript，CSS足够智能，可以查询

href

属性并应用适当的CSS属性

考虑开一个派对