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

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>

The purpose of the above code is to add class (class='pdf') to anchor tag, which have file extension as 'pdf'. As this code is dynamically generated, I've no access to modify it. So, I decided to write a jQuery code. I've messed up something with the above code and it is not giving me desired output.

Please help.

Answer 1

You have to iterate, right now this is the document, not each anchor

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

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

FIDDLE

A more sneaky way to do this would be to just return the extension as the class

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

That way you're setting pdf, docx etc. classes on the anchors automagically

FIDDLE

Answer 2

An other way:

$(document).ready(function () {
    $('table td span.file a').addClass(function () {
        return $(this).text().split('.').pop() == "pdf" ? "pdf" : null;
    });
});

--DEMO--

Thx @adeneo for jsFiddle base sample

BTW, you could add class regarding any extension: {oops, already posted by adeneo...}

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

--DEMO--

Answer 3

this will help you.

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

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