どもです。

スマホ等で閲覧したとき、電話番号の記載されている画像なんかをクリックすると、電話できると良い。
それ自体の実現は、<a href="tel:0000000000">で可能だけど、PC閲覧時にこれは要らない。

この方法はいくつかあるだろうけど、今回はjQueryの、ユーザーエージェント識別で対応することにしました。
そこまでは問題ありません。
問題は、どうやってjsを使って、画像をaタグで囲むかどうかです。

単に、画像をaタグで囲むだけなら方法は色々ありますが、今回は、該当する画像が複数種類あるので厄介です。
できれば自動的に、imgタグ中に置いた値が反映されるようにしたい。

特定の要素をタグで囲むといえばwrapですが、単なるwrapでは、囲うタグの中に変数を設置できないのです。

そこで、.wrap( function(index) )を使います。

$('img').wrap(function(index) {
	return '<a href="tel:' + $(this).attr("class") + '" />';
})

今回は、hrefに設置したい値をクラスに入れました。
.wrap( function(index) )、つまり要素を囲むwrapを関数化したものですが、こちらだと変数が設置可能です。
引数をindexとすると、indexには1つ1つの要素が入ります。foreachでループしてるような感じになります。

ユーザーエージェントで判別するところまでつけるとこうなります。

$(document).ready(function(){
	if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
		$('img').wrap(function(index) {
			return '<a href="tel:' + $(this).attr("class") + '" />';
		})
	}
});

参考サイト
blog→in【スマートフォン＆タブレットとパソコンで別のJavaScriptを実行】
js STUDIO【.wrap() 】