Question

我有一个包含多个不同文件类型文件的目录。每个文件都有一个预先检测到的图标，该图标会自动设置并与文件类型相关。现在我想扩展这些图标 - 但是，我不能更改该算法，我不能更改html代码。所以我现在试图通过jQuery的.each（）函数来改变某些图标。但是，它无法正常工作。

编辑：还有文件夹，因此在这种情况下没有文件扩展名。但我只需要更改文件，而不是文件夹。

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

<tr data-id="49312" data-type="file" data-size="589471" data-file="Filename.numbers" data-mime="application/x-iwork-numbers-sffnumbers" data-permissions="27" data-has-preview="false" data-e2eencrypted="false" data-path="/Path1/Path2" data-share-permissions="19">
  <td class="selection"><input id="select-files-49312" type="checkbox" class="selectCheckBox checkbox">
    <label for="select-files-49312"><span class="hidden-visually">Auswählen</span></label></td>
  <td class="filename ui-draggable"><a class="name" href="/LinkToFile/Filename.numbers">
    <div class="thumbnail-wrapper">
      <div class="thumbnail" style="background-image:url(/img/mimetypes/x-office-spreadsheet.svg);">
        <div class="favorite-mark "><span class="icon icon-star"></span><span class="hidden-visually">Nicht favorisiert</span></div>
      </div>
    </div>
    <span class="nametext"><span class="innernametext">Filename</span><span class="extension">.numbers</span></span><span class="fileactions">
    <a class="action action-share permanent" href="#" data-action="Share" data-original-title="" title="">
    <span class="icon icon-shared"></span><span class="hidden-visually">Teilen</span></a>
    <a class="action action-menu permanent" href="#" data-action="menu" data-original-title="" title=""><span class="icon icon-more"></span><span class="hidden-visually">Aktionen</span></a>
    </span>
    </a></td>
  <td class="filesize" style="color:rgb(160,160,160)">576 KB</td>
  <td class="date"><span class="modified live-relative-timestamp" title="" data-timestamp="1515934910000" style="color:rgb(160,160,160)" data-original-title="14. Januar 2018 14:01">vor 2 Monaten</span></td>
</tr>
<tr data-id="49997" data-type="file" data-size="36301" data-file="Filename.pdf" data-mime="application/pdf" data-permissions="27" data-has-preview="false" data-e2eencrypted="false" data-path="/Path1/Path2" data-share-permissions="19">
  <td class="selection"><input id="select-files-49997" type="checkbox" class="selectCheckBox checkbox">
    <label for="select-files-49997"><span class="hidden-visually">Auswählen</span></label></td>
  <td class="filename ui-draggable"><a class="name" href="/LinkToFile/Filename.pdf">
    <div class="thumbnail-wrapper">
      <div class="thumbnail" style="background-image:url(/img/mimetypes/application-pdf.svg);">
        <div class="favorite-mark "><span class="icon icon-star"></span><span class="hidden-visually">Nicht favorisiert</span></div>
      </div>
    </div>
    <span class="nametext"><span class="innernametext">Filename</span><span class="extension">.pdf</span></span><span class="fileactions">
    <a class="action action-share permanent" href="#" data-action="Share" data-original-title="" title="">
    <span class="icon icon-shared"></span><span class="hidden-visually">Teilen</span></a>
    <a class="action action-menu permanent" href="#" data-action="menu" data-original-title="" title=""><span class="icon icon-more"></span><span class="hidden-visually">Aktionen</span></a>
    </span>
    </a></td>
  <td class="filesize" style="color:rgb(160,160,160)">36 KB</td>
  <td class="date"><span class="modified live-relative-timestamp" title="" data-timestamp="1518510897000" style="color:rgb(127,127,127)" data-original-title="13. Februar 2018 09:34">vor 25 Tagen</span></td>
</tr>

使用inspect-function检查jsfiddle。 https://jsfiddle.net/d3Lym8kj/16/

提前致谢

each（）函数无法正常工作

0 个答案: