jQueryでスマホの場合にのみ電話番号を自動リンク

電話番号を記載する際にPCの場合は番号の記載のみで問題ありませんが、スマートフォンの場合は直接電話を掛けることができるようにリンクを設置するのが親切。
PCとスマートフォンでHTMLタグを別に記載する方法もありますが、記載漏れの無いように、今回はjQueryを使い自動でリンクを設置する方法をメモ。

HTML

<div class="tel">○○○-○○○-○○○○</div>

jQuery

if($(window).width() < 560){
	$('.tel').each(function(){
		var str = $(this).text();
		$(this).html('<a href="tel:'+str+'">'+str+'</a>');
	});
}

//実行結果
<div class="tel"><a href="tel:○○○-○○○-○○○○">○○○-○○○-○○○○</a></div>

「$(this).text」関数で対象となるタグ（例：class=”tel”）の電話番号（テキスト情報）を取得。
「$(this).html」関数を使って、もともとの記載のあった箇所にリンクを付与した電話番号を置き換えています。

「each」関数で繰り返し処理を行っているので、同ページに電話番号が複数ある場合でも可。
冒頭のif文（場合分け）は画面サイズ（例：560px）を利用しています。

• 【jQuery】.text()と.html()の違い