用jquery改变某些父母的孩子

Question

1U有一个包含多个文件的文件目录。我需要更改某些文件的mime-type-icons，因为默认值不够。我还必须通过jquery插入代码，因为我无法更改mimetype-function。

我的HTML看起来像这样：

<tr data-file="filename.psd" data-mime="application/octet-stream">
  <td class="td_01">
    <a class="name">
      <div class="thumbnail" style="background-image:url(/img/filetypes/image.svg)"></div>
    </a>
  </td>
</tr>

<tr data-file="filename.sketch" data-mime="application/octet-stream">
  <td class="td_01">
    <a class="name">
      <div class="thumbnail" style="background-image:url(/img/filetypes/image.svg)"></div>
    </a>
  </td>
</tr>

如您所见，我的photoshop文件和草图文件的缩略图是相同的。

现在，我想更改与文件扩展名相关的子div的'style'属性。如果data-file-attribute的扩展名为.psd>，则将div＃thumbnail的style-attribute更改为... / filetypes / psd.svg。如果data-file-attribute是.sketch> div #tignails的stle-attribute应该是... / filetypes / sketch.svg。等等...

如何才能做到这一点？有任何想法吗？我是jQuery的新手。

提前致谢！

Answer 1

只需循环它们，然后按.thumbnail过滤：

$('tr[data-file]').each(function() {  
    let extension = $(this).data('file').split('.').pop().toLowerCase();
    $(this).find('.thumbnail').css('background-image', 'url(/img/filetypes/'+extension+'.svg)');
});