Selecting all external links and amending them in some way is probably one of the most used jQuery tutorials. By selecting all anchor links on the page and for example adding a CSS class with only one jQuery line shows how jQuery is simple and powerful. Also if you are progressively enhancing your website this is one of the trick you might use.
Actually, I had to select all external links and add an image that indicates it the other day. So, I created a custom jQuery selector called :external that makes finding external links easier for you. (Read “Custom jQuery Selectors” post to learn how to create your own custom selectors)
External links custom jQuery selector code:
// Creating custom :external selector
$.expr[':'].external = function(obj){
return !obj.href.match(/^mailto\:/)
&& (obj.hostname != location.hostname);
};
// Add 'external' CSS class to all external links
$('a:external').addClass('external');
You can see this code in action here.
You may use the code above to:
- Add CSS class to all external links
- Dynamically add an image after the link to indicate that it is an external link
- Bind a click event to track what links where clicked
- etc.
Update: The return part was update to take into the account the mailto links as suggested in comments by Phillipp and Karl below.