Why is jQuery not inserting new html based on attribute selectors?

Question

Hi all!

This is embarrassing, but here goes. Here's the page that I'm working on: www.mchenry.edu/administration/BoardSchedule.asp

I'm using jQuery ver. 1.3.1 and I'm putting tiger stripes on the table. All is well. However, I want to insert a FileInfo class after all .pdf file extensions in the document, so users know they are selecting a PDF. Here's my little fileinfo.js jQuery snippet:

$(function(){
    $('<span class="FileInfo"> PDF </span>').insertAfter('li a[href$=.pdf]');
});

Why isn't it working? Is it something silly? This snippet works on other pages, just not here. What's going on?

Thnx.

Answer 1

I think that what you want to do is...

$(function(){
    $('table a[href$=.pdf]').after('<span class="FileInfo">PDF</span>');
});

Btw, why not to use just CSS instead?

table .pdf:after, table [href$=.pdf]:after {
    content: " PDF";
}

Answer 2

You are searching for all the a elements under a LI element, if you want to use it on the links of your table, you should change your selector:

$('td a[href$=.pdf]').after('<span class="FileInfo"> PDF </span>');