Jquery 根据文件扩展名更改图标

您好，我有一个问题，如果子节点包含特定的文件扩展名，是否可以更改父节点的图标

让我用一些代码来解释我自己。我有以下设置：

<span class="file">
  <a href="../someurl/print.pdf" class="">Print PDF</a>
</span>
<span class="file">
  <a href="../someurl/test.pdf" class="">Test PDF</a>
</span>
<p>
Should show up a word icon
</p>
<span class="file">
  <a href="../someurl/word-test.docx" class="">Word document</a>
</span>

是否可以根据文件扩展名更改

的背景？从下面的演示中可以看出，生成了Word图标，但它并不替换当前的PDF图标

请记住，我不能更改HTML，因为HTML是通过DNN中的模块呈现的。因此，我需要一个纯CSS的解决方案，或者可能需要一些Javascript的帮助

---

我可能误解了您的意思，但这在Chrome中是有效的。只需在

a

上设置原始.file，而不是

span

span.a文件{
填充：1px 0 1px 20px；
显示：块；
}
span.file a[href$=”.docx“]{
/*覆盖背景*/
背景：url（'http://image.chromefans.org/fileicons/format/docx.png'）0 0不重复；
}
span.file a[href$=”.pdf“]{
背景：url（'https://static.spiceworks.com/images/how_to_steps/0005/9590/8a544ad4a4ee8c8b164ff38a3f700f5a35f3805cbf7f27d8ec0bb4e455e5dab1_icpdf.gif'）0 0不重复；
}
span.file a[href$=“.xls”]{
/*覆盖背景*/
背景：url（'http://image.chromefans.org/fileicons/format/xls.png'）0 0不重复；
}

应该显示一个单词图标

我可能误解了您的意思，但这在Chrome中是有效的。只需在

a

上设置原始.file，而不是

span

span.a文件{
填充：1px 0 1px 20px；
显示：块；
}
span.file a[href$=”.docx“]{
/*覆盖背景*/
背景：url（'http://image.chromefans.org/fileicons/format/docx.png'）0 0不重复；
}
span.file a[href$=”.pdf“]{
背景：url（'https://static.spiceworks.com/images/how_to_steps/0005/9590/8a544ad4a4ee8c8b164ff38a3f700f5a35f3805cbf7f27d8ec0bb4e455e5dab1_icpdf.gif'）0 0不重复；
}
span.file a[href$=“.xls”]{
/*覆盖背景*/
背景：url（'http://image.chromefans.org/fileicons/format/xls.png'）0 0不重复；
}

应该显示一个单词图标

我看到的小提琴显示pdf文件的pdf图标，以及docx文件的pdf和word图标。此外，由于要将图标添加到元素中，因此需要填充该图标而不是元素

这似乎有效：

span.file a{
  padding: 1px 0 1px 20px;
  display: block;
}
 span.file a[href$=".docx"] {
  background: url('http://image.chromefans.org/fileicons/format/docx.png') 0 0 no-repeat;
}

span.file a[href$=".pdf"] {
   background: url('https://static.spiceworks.com/images/how_to_steps/0005/9590/8a544ad4a4ee8c8b164ff38a3f700f5a35f3805cbf7f27d8ec0bb4e455e5dab1_icpdf.gif') 0 0 no-repeat;
}

---

我看到的小提琴显示pdf文件的pdf图标，以及docx文件的pdf和word图标。此外，由于要将图标添加到元素中，因此需要填充该图标而不是元素

这似乎有效：

span.file a{
  padding: 1px 0 1px 20px;
  display: block;
}
 span.file a[href$=".docx"] {
  background: url('http://image.chromefans.org/fileicons/format/docx.png') 0 0 no-repeat;
}

span.file a[href$=".pdf"] {
   background: url('https://static.spiceworks.com/images/how_to_steps/0005/9590/8a544ad4a4ee8c8b164ff38a3f700f5a35f3805cbf7f27d8ec0bb4e455e5dab1_icpdf.gif') 0 0 no-repeat;
}

---

使用

锚定

上的

背景图像

，而不是

span

span.file{
显示：块；
填充：1px0px；
}
span.file a[href$=”.docx“]{
背景：url（'http://image.chromefans.org/fileicons/format/docx.png左中不重复；
左侧填充：20px；
}
span.file a[href$=”.pdf“]{
背景：url（'https://static.spiceworks.com/images/how_to_steps/0005/9590/8a544ad4a4ee8c8b164ff38a3f700f5a35f3805cbf7f27d8ec0bb4e455e5dab1_icpdf.gif左中不重复；
左侧填充：20px；
}

应该显示一个单词图标

使用

锚定

上的

背景图像

，而不是

span

span.file{
显示：块；
填充：1px0px；
}
span.file a[href$=”.docx“]{
背景：url（'http://image.chromefans.org/fileicons/format/docx.png左中不重复；
左侧填充：20px；
}
span.file a[href$=”.pdf“]{
背景：url（'https://static.spiceworks.com/images/how_to_steps/0005/9590/8a544ad4a4ee8c8b164ff38a3f700f5a35f3805cbf7f27d8ec0bb4e455e5dab1_icpdf.gif左中不重复；
左侧填充：20px；
}

应该显示一个单词图标

您将需要使用一些Javascript/jQuery，因为没有办法只使用CSS将类应用于

span

。下面是一个解决方案，它使用一个小小的jQuery来完成您所追求的目标：

HTML

<span class="file">
  <a href="../someurl/print.pdf" class="">Print PDF</a>
</span>
<span class="file">
  <a href="../someurl/test.pdf" class="">Test PDF</a>
</span>
<p>
Should show up a word icon
</p>
<span class="file">
  <a href="../someurl/word-test.docx">Word document</a>
</span>

JQUERY

$("a[href$='pdf']").parent('span').addClass('pdf');

$("a[href$='docx']").parent('span').addClass('word');

---

正如在其他文章中所指出的，如果你可以将背景应用到

a

中，那么你可以只使用CSS

你需要使用一些Javascript/jQuery，因为没有办法只使用CSS将类应用到

span

中。下面是一个解决方案，它使用一个小小的jQuery来完成您所追求的目标：

span.file a[href$=".pdf"]{
  background: url('https://static.spiceworks.com/images/how_to_steps/0005/9590/8a544ad4a4ee8c8b164ff38a3f700f5a35f3805cbf7f27d8ec0bb4e455e5dab1_icpdf.gif') 0 0 no-repeat;
  padding: 1px 0 1px 20px;
  display: block;
}
 span.file a[href$=".docx"] {
  background: url('http://image.chromefans.org/fileicons/format/docx.png') 0 0 no-repeat;
   padding: 1px 0 1px 20px;
}

HTML

<span class="file">
  <a href="../someurl/print.pdf" class="">Print PDF</a>
</span>
<span class="file">
  <a href="../someurl/test.pdf" class="">Test PDF</a>
</span>
<p>
Should show up a word icon
</p>
<span class="file">
  <a href="../someurl/word-test.docx">Word document</a>
</span>

JQUERY

$("a[href$='pdf']").parent('span').addClass('pdf');

$("a[href$='docx']").parent('span').addClass('word');

---

如其他帖子所述，如果你可以将背景应用到

a

上，你可以使用CSS

它是否需要在

span

上设置图标？它不能改为在

a

上设置吗？它需要在

span

上设置图标吗？它不能改为将其设置为

a

？

span.file a[href$=".pdf"]{
  background: url('https://static.spiceworks.com/images/how_to_steps/0005/9590/8a544ad4a4ee8c8b164ff38a3f700f5a35f3805cbf7f27d8ec0bb4e455e5dab1_icpdf.gif') 0 0 no-repeat;
  padding: 1px 0 1px 20px;
  display: block;
}
 span.file a[href$=".docx"] {
  background: url('http://image.chromefans.org/fileicons/format/docx.png') 0 0 no-repeat;
   padding: 1px 0 1px 20px;
}