jQuery prepend to all hyperlink elements that link to PDF files

Question

I would like to prepend "Download a PDF of " to any hyperlinks, linking to PDF files. Currently I'm able to prepend that exact text, but it prepends it to the hyperlink text. I would like it to reside outside of the hyperlink element, like so: Download a PDF of [hyperlink with text]

This is the code I'm using now:

jQuery('a[href$=.pdf]').prepend('Download a PDF of ');

score 6 · Answer 1 · answered Jan 31 '10 at 17:58

6

Have you tried before?

jQuery('a[href$=.pdf]').before('Download a PDF of ');

answered Jan 31 '10 at 17:58

AlteredConcept

2,602
7
32
36

1

+1 great answer. It works: http://jsbin.com/akiba3 I confess, I took @BalusC's SSCCE and changed the one line out to use your solution to run my test. – Doug Neiner Jan 31 '10 at 18:06
Sweet! I <3 jQuery. It makes my life so much easier. =D – AlteredConcept Jan 31 '10 at 18:10
+1 I too had typed up Balus' answer, but discarded it when seeing this one :) Nice work, @AlteredConcept. – Sampson Jan 31 '10 at 18:13

BlueberrySourRaspberry · Answer 2 · 2014-04-08T09:55:15.537

5

The other selectors that have been provided in answers are wrong, as of today anyway. jQuery will complain:

Uncaught Error: Syntax error, unrecognized expression: a[href$=.pdf]

The right way to select the anchor is:

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

Note the quotes around .pdf

edited Apr 08 '14 at 09:55

answered Apr 08 '14 at 09:47

BlueberrySourRaspberry

923
13
12

score 2 · Answer 3 · answered Jan 31 '10 at 18:00

You could wrap it up in an inline element (e.g. <span>) and insert it before the desired elements. Here's an SSCCE, just copy'n'paste'n'run it:

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2172666</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script>
            $(document).ready(function() {
                $('<span>Download a PDF of </span>').insertBefore('a[href$=.pdf]');
            });
        </script>
    </head>
    <body>
        <p><a href="foo.pdf">foo.pdf</a></p>
        <p><a href="foo.exe">foo.exe</a></p>
        <p><a href="bar.pdf">bar.pdf</a></p>
    </body>
</html>

Edit: ah, as answered before, the jQuery.before() works exactly the way you want, so I would go for it instead.

The `span` isn't needed, but it is needed using it the way you show here (with `$()` and `insertBefore`) but +1 for updating your answer and providing a working example. — Doug Neiner, Jan 31 '10 at 18:05
Yes exactly. I just wasn't fully aware about the existence and benefit of `before()`. Now I do :) — BalusC, Jan 31 '10 at 18:13

score 0 · Answer 4 · answered Jan 31 '10 at 18:08

0

Here's an example that will do what you're looking for:

<a href="foo.pdf">Foo</a>
<a href="bar.pdf">Bar</a>
<span id='foo'>Download a pdf of </span>
<script type='text/javascript'>
$('#foo').insertBefore('a[href$=.pdf]');
</script>

answered Jan 31 '10 at 18:08

monksp

929
6
14

jQuery prepend to all hyperlink elements that link to PDF files

4 Answers4