Prevent link icon from adding to images

[dcp3450]

I could have sworn there was an article on css-tricks but I couldn’t find it.

I have some jquery that adds an icon to links based on file type and external. PDF links get a pdf icon, external links get a external link icon, doc links get a doc icon, etc. However, images are too. I want this to only effect text links. Example of how I add the icons:

$(‘a[href$=".pdf"]’).append(‘<div class="pdf"></div>’).attr(‘target’,’_blank’).attr(‘title’,’Adobe PDF’);

How can I tell it to ignore images?

[dcp3450]

got it! added .not(‘:img’) before the append.

[dcp3450]

nevermind, didn’t work.

[noahgelman]

.not(‘:img’) isn’t working because you aren’t applying it to the img, but the a tag around that image. Try using .not(‘:a img’). That way it’s excluding links with images in them.

[dcp3450]

I tried that and it didn’t work either.

[dcp3450]

solution:

.not(‘a:has(img)’)

[noahgelman]

Yeah, that sounds right. Looking at it now .not(‘:a img’) shouldn’t work. That targets the img inside the link and not the link itself which is what you were trying to do. Good lesson for me.

[dcp3450]

you and me both! :D

[Author]

Posts