使用jQuery为非站内超链接添加图标
一般我们在写博客的过程中，大多数的文章都会有些外部链接到别的网站。这时若是使用明显的标记提前告知来访者点击链接后会进入到其他网站，对于用户体验提升有些帮助。在很多博客上看到的都是这样的：在外部链接的后面会出现一个小图标，指明是站外链接。在我的博客上，所有导向其他网站的链接都会有对应网站的 favicon 图标显示，这个大家应该都会看得到。
我使用的是 jQuery 的方法，就一句代码的问题。但是有一些地方还需要改进，只能请教各位大神了
<!-- 非本站超链接添加图标 Start -->
<script type="text/javascript">
jQuery(document).ready(function($){
$(".post .content a:not([href*=xiao3.info])").each(function(e){
$(this).prepend("<img src=http://www.google.com/s2/favicons?domain="+this.href.replace
(/^(http:\/\/[^\/]+).*$/, '$1').replace( 'http://', '' )+"
style=line-height:16px;padding-right:5px;padding-left:5px;height:16px;vertical-align:middle;>");
});
});
</script>
<!-- 非本站超链接添加图标 End -->
大家可以看到上面的代码就是通过调用外链网站的 Google 的 favicon 缓存地址来实现的，a:not([href*=xiao3.info])这个的意思是不对含有 xiao3.info 的链接显示图标，因为这个是站内链接。但是缺点也出来了，就是这样调用的话全部的链接都会出现 Favicon 图标，即一些我外链的图片也会有图标出来，这样就会有一些不美观，不知道该如何去除 .gif .png .jpg 的图标，各位老师有知道的能给个解决的方法么？
请各位老师有解决办法的在留言中给个说明。谢谢～
啊做个脚印 我也正等这个答案
JQ无比强大啊
@万戈 我想问下，文章中提到的那个问题，你有什么解决办法么？我实在是不会啦！
$(“.post .content a:not([href*=xiao3.info]),a:not[rel='nofollow'],a:not[rel='external'],a:not[rel='external nofollow'])”).each…
这样外链就要有nofollow ,external ,external nofollow之中的一个.不知这样可不可以!
img:not([src*=.jpg]),不知道有没有这样用的!
@edikud 你说的是写成这样么：
$(".post .content a:not([href*=xiao3.info]),a img:not([src*=.jpg]),a img:not([src*=.png]), a img:not([src*=.gif])").each(function(e){@xiao3
$(“.post .content a:not([href*=xiao3.info]),a
img:not([src*=.jpg]),img:not([src*=.png]),
img:not([src*=.gif])”).each(function(e){ 我没有用过啊…
@edikud 还是不行～
啊～被这个东西搞郁闷啦！
看不懂。
$(“.post .content a:not([href*=xiao3.info])”).not(‘:has(img)’).each 试试…
@Insen 还是不行！
判断一下链接的结尾部分。
jQuery(document).ready(function($){
$(“.post .content a:not([href*=xiao3.info])”).each(function(e){
if(!$(this).parent().is(‘img’)) $(this).prepend(“”);
});
});
@phy 感谢，你终于帮我搞定啦！(*^__^*) 嘻嘻……
@willerce 已经搞定啦！可以在我博客里面查看效果！还不错哦！