jQuery で外部リンクに自動でアイコンを表示する

外部リンク(新しいウィンドウで開くリンク)に外部リンク用のアイコンを自動で表示する方法。
あらかじめ CSS で外部リンクが定義されていれば CSS の書き換えでアイコンを付与できますが、ある程度サイトの内容が作りこまれている段階で追加しようとするとすべてのリンクを編集する必要があります。
そんなときに jQuery を利用すれば少しのコードで自動的に付与することができます。

コード

Script

$(function(){
	$("a[target='_blank']").addClass("new_window");
});

CSS

a.new_window {
	padding: 0 16px 0 0;
	background: url("アイコンのURL") no-repeat right 60%;
}

HTML

<a href="/" target="_blank">これは外部リンクです</a>

デモ

これは外部リンクです

解説

[attribute=’value’] セレクターは特定の属性が特定の値を持っているときにその要素を選択できるセレクター。
今回の場合は “target” 属性を持っているかつ、属性値が “_blank” の場合に要素を選択して.addClass() で “new_window” というクラスを追加。CSS で .new_window の背景に外部リンク用アイコンを指定。

参照ページ

jQueryでtarget=”_blank”に自動でアイコンを付ける方法 | FOOTMARK
http://hiroyukiterada.com/jquery/246/

[attribute=value] – jQuery 日本語リファレンス
http://semooh.jp/jquery/api/selectors/%5Battribute+value%5D/