javascript - 将类添加到具有相同文件扩展名的所有 anchor 标记

Question

<table>
  <tr>
    <td>
      <span class="file"><a class="" href="#">test1.docx</a></span>
      <span class="file"><a class="" href="#">test1.pdf</a></span>
    </td>
    <td>
      <span class="file"><a class="" href="#">test1.docx</a></span>
      <span class="file"><a class="" href="#">test1.pdf</a></span>
    </td>
  </tr>
  <tr>
    <td>
      <span class="file"><a class="" href="#">test2.docx</a></span>
      <span class="file"><a class="" href="#">test2.pdf</a></span>
    </td>
    <td>
      <span class="file"><a class="" href="#">test2.docx</a></span>
      <span class="file"><a class="" href="#">test2.pdf</a></span>
    </td>
  </tr>
</table>

<script>
$(document).ready(function(){
  var fileName = $('table td span.file a').text();
  var ext = fileName.text().split('.').pop();
  if(ext == pdf) {
    $(this).addClass('pdf');
  }
});
</script>

上述代码的目的是向 anchor 标记添加类(class='pdf')，其文件扩展名为'pdf'。由于此代码是动态生成的，因此我无权修改它。所以，我决定编写一段 jQuery 代码。我把上面的代码弄乱了，它没有给我想要的输出。

请帮忙。

Answer 1

你必须迭代，现在this是文档，而不是每个 anchor

$(document).ready(function(){
  $('table td span.file a').each(function() {

      var ext = $(this).text().split('.').pop();
      if(ext == 'pdf') {
          $(this).addClass('pdf');
      }
  });
});

FIDDLE

执行此操作的更偷偷摸摸的方法是将扩展作为类返回

$('table td span.file a').addClass(function() {
    return $(this).text().split('.').pop();
});

这样你就可以自动在 anchor 上设置 pdf、docx 等类

FIDDLE