Annotating page links using jQuery

Question

I am doing Lynda.com JQuery Essential Training by Joe Marini. Chapter 2, Case Study for Annotating Page Links. It is necessary to add a small gif icon next to any links to pages that are .pdf files. I am using jquery-1.10.2.min.js. Following the instructions, the code I typed 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: Search error: syntax error, unrecognized expression: a [href $ =. pdf] Sorry, could not post a lesson snapshot. No reputation yet.

Am I just typing this wrong? Or could this change as this lesson was done with an earlier version of jquery? Thanks

Answer 1

You probably need to avoid the double backslash \\

The selector will be $("a[href$=\\.pdf]")

From official documents

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

EDIT

Adding quotes around .pdf will work just as @Cherniv and @zzzzBov indicated

Answer 2

Or just wrap this .pdf single quotes:

  $("a[href$='.pdf']").after("<img src='images/small_pdf_icon.gif' align='absbottom' />"); 

Work: http://jsfiddle.net/RFD6h/

Answer 3

Must be:

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

Answer 4

The selector must be specified:

 $('a[href$=".pdf"]'); 

docs :

value: attribute value. It can be either an unquoted single word or a quote string.