Annotating page links with jQuery

Question

I am doing the Lynda.com jQuery Essential Training by Joe Marini. Chapter 2, Practical example for annotating page links. This is to add a small icon gif next to any page links that are .pdf files. I am using jquery-1.10.2.min.js. Following the instructions, the code as I typed it is:

$(“document”).ready(function() {
        $(“a[href$=.pdf]”).after(“<img src=’images/small_pdf_icon.gif’ align=’absbottom’ />”);
});

which returns this error in the java console in Chrome: Uncaught Error: Syntax error, unrecognized expression: a[href$=.pdf] Sorry, couldn't post a screen shot of the lesson. No reputation yet.

Am I just typing this incorrectly? Or could it have changed since this lesson was made with and earlier version of jquery? Thanks

Answer 1

You probably need to escape the dot with two backslashes \\

The selector would be $(“a[href$=\\.pdf]”)

From official docs

To use any of the meta-characters ( such as !"#$%&'()*+,./:;<=>?@[]^`{|}~ ) as a literal part of a name, it must be escaped with with two backslashes: \. For example, an element with id="foo.bar", can use the selector $("#foo\\.bar")

EDIT

Adding quotes around .pdf would work too as @Cherniv and @zzzzBov pointed out