Use jQuery to check for link extension

Question

I'm trying to read all links on the page and check if link extension is ending with '.png'. If it does, then when that link is clicked, I want to grab that image and append into div with the class 'test'. If link doesn't end with '.png' just ignore it and open normally.

This is markup, you can grab it on jsFiddle too:

<a href="image01.png">Image 01</a>
<a href="image02.png">Image 02</a>
<a href="http://www.google.com/">Page</a>
<a href="image03.png">Image 03</a>

<div class="test"></div>

... and this is how markup should look like when first link is clicked:

<a href="image01.png">Image 01</a>
<a href="image02.png">Image 02</a>
<a href="http://www.google.com/">Page</a>
<a href="image03.png">Image 03</a>

<div class="test">
  <img src="image01.png" />
</div>

Thanks!

ShankarSangoli · Answer 1 · 2011-07-18T18:17:10.560

2

Try this

$("a[href$='.png']").click(function(e){
   e.preventDefault();
   $(".test").append("<img src='"+this.href+"' />");
});

edited Jul 18 '11 at 18:17

answered Jul 18 '11 at 17:40

ShankarSangoli

69,612
13
93
124

+1, but why are you bothering with returning `false` since you're already calling `preventDefault()`? – Frédéric Hamidi Jul 18 '11 at 17:42
It is not required but I always have return false for anchor clicks when I want to prevent default behavior. – ShankarSangoli Jul 18 '11 at 17:44
That's fine, but `preventDefault()` already does that. Returning `false` from a jQuery handler, however, will also prevent the event from bubbling up the container chain, which might not always be what you want :) – Frédéric Hamidi Jul 18 '11 at 17:46
return false do not stop event bubbling. To stop event bubbling you have to call e.stopPropagation(); – ShankarSangoli Jul 18 '11 at 17:47
Nope, returning `false` is equivalent to both `preventDefault()` and `stopPropagation()` since we're in a jQuery handler. See [this question](http://stackoverflow.com/q/1357118/464709). – Frédéric Hamidi Jul 18 '11 at 17:49
@mplungian - Yes this.href is enough thanks, @Frederic - I have edited my answer and removed return false thanks. – ShankarSangoli Jul 18 '11 at 18:18
Why the preventDefault before the append? – mplungjan Jul 18 '11 at 19:05
@mpungjan - You can call it anywhere in the function it doesn't matter. – ShankarSangoli Jul 18 '11 at 19:07

mplungjan · Accepted Answer · 2011-07-18T19:08:50.130

2

Here is a complete and quite elegant (imho) combination of the posted examples, errors and other stuff fixed

$('a[href$=".png"]').click(function(e) { // nice one ChristopheCVB
    $('.test').append($("<img>", {src: this.href})); // neater than "<img src='"+...+">"
    e.preventDefault(); // should be enough
});

Demo here

Next we need a test to see if image is already there...

edited Jul 18 '11 at 19:08

answered Jul 18 '11 at 17:54

mplungjan

169,008
28
173
236

Thanks mplungjan, I selected your reply as accepted solution although I have to say @ShankarSangoli was first one with complete solution. – Klikerko Jul 18 '11 at 18:54
I decided to combine since one was more elegant that the other. For example the src:this.href instead of string concatenation - everybody has now edited their solutions so they all resemble each other more than before – mplungjan Jul 18 '11 at 19:07

Use jQuery to check for link extension

2 Answers2