jQuery external links class

Question

Hi People. I have implemented the following in to one of our sites to show an external link icon next to external links:

$(document).ready(function() {
  $('#extlinks a').filter(function() {
 return this.hostname && this.hostname !== location.hostname;
  }).after(' <img src="/images/external.png" alt="external link"/>');
});

We use Business Catalyst and I hope it is not something to do with the way their servers are set up but, if you remove the www from the url ALL links show as external.

Here's an example: http://noosabiosphere.org.au/%5Fblog/Environment%5FBlog

Thanks.

Answer 1

It looks like the links are being written on the page with the www. in front, not relative links. the

this.hostname !== location.hostname

is returning true.

Answer 2

Please make sure links start with http:// I've tested it with following links:

<ul style="list-style:none none outside;">
    <li><a href="http://www.google.com"&gt;Google&lt;/a&gt;&lt;/li&gt;
    <li><a href="http://localhost/EnterKey.html"&gt;Enter Key</a></li>
    <li><a href="www.microsoft.com">Microsoft</a></li>
    <li><a href="http://stackoverflow.com/questions/"&gt;SO&lt;/a&gt;&lt;/li&gt;
</ul>

<script type="text/javascript">
$(function(){
 $("a").filter(function(){
  return this.hostname && this.hostname !== location.hostname;
 }).after("<img src='/images/extlink.gif'/>");
});
</script>

Only first (Google) and last (SO) links show image not the thrid (MS) one.