Since wiki sites gained in popularity I noticed a new trend that grew up; visually identifying external links. And I find pretty neat. The usual fashion to do it is to add a small arrow like icon at the end or the beginning of an external link.

I decided to implement it in a web site I was building at work, but I didn't want to touch the backend. So I though I'd just use jQuery with CSS to achieve it. I made a pretty small and neat solution:

$(document).ready(function(){
	$('a[target=_blank]').addClass('external');
});

Quite clever actually. I then used the external class to add the visual cue to the links with CSS.

But my co-worker quickly found a bug. The script also added the class to non-textual (image) links.

My co-worker doesn't like much JavaScript and I believe he was afraid that fixing this would grow the code and get ugly, so he proposed to implement it server-side.

I said wait a minute, jQuery is supposed to make my life easy, and it turns out does. After 2min on the documentation site I came with this new solution:

$(document).ready(function(){
	$('a[target=_blank]:not(:has(img))').addClass('external');
});

I really didn't expect that the solution to my problem would fit in the same line and still be neat, thanks jQuery !