最近ではレスポンシブ対応などでの構成を考える上で
要素によって、PC版ではリンクさせるけれど、スマホ版ではリンクさせない、といった
HTMLソース上では<a>タグをつける必要があっても
それを無効化する必要があることによく遭遇します。

そんな時に使える、jQueryで親要素を削除することができる
「unwrap()」が便利だったのでご紹介。

jQueryで親要素を削除する「unwrap()」

サンプルでは、リンクテキストを用意して、
PCでは通常にリンクが張られ、スマホ(iPhone/iPod、Android)では
テキスト表示のみになる、といったものを紹介してみます。

HTML側ではリンク<a>タグの中に
<span>タグで囲ったテキストを入れます。

◆HTML
<a href="http://black-flag.net" target="_blank"><span>リンクテキスト</span></a>

そしてjQueryの「unwrap()」を使って
スマホの場合はリンクタグを削除する指定を以下のように加えます。

◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function(){
	var agent = navigator.userAgent;
	if(agent.search(/iPhone/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1){
		$('span').each(function(){
			$(this).unwrap();
		});
	}
});
</script>

これを実行させると以下のような感じに。

PCで見るとテキストにはリンクが張られていますが
スマホでみた場合はリンクが張られていないテキストのみの表示になります。

上記サンプルではPCとスマホの判別によって、親要素の削除動作を実行させていますが
もう1パターンとして、リンクのhrefの内容によって
処理を実行させるようなこともできるので、そのサンプルも紹介してみます。

HTMLでは5つのリンクを用意したとして、
2番目と4番目のリンク先「href」は「#」としておきます。

◆HTML
<ul>
<li>・<a href="http://black-flag.net" target="_blank"><span>リンクテキスト1</span></a></li>
<li>・<a href="#"><span>リンクテキスト2</span></a></li>
<li>・<a href="http://black-flag.net" target="_blank"><span>リンクテキスト3</span></a></li>
<li>・<a href="#"><span>リンクテキスト4</span></a></li>
<li>・<a href="http://black-flag.net" target="_blank"><span>リンクテキスト5</span></a></li>
</ul>

リンクの中で「href」の値が「#」のものをひろって
リンク<a>タグを削除させます。

◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function(){
	$('a').each(function(){
		var hrefUrl = $(this).attr('href');
		var urlBlank = '#';
		if(hrefUrl === urlBlank){
			$(this).children().unwrap();
		}
	});
});
</script>

これを実行させると以下のような感じに。

HTMLソース上では全てリンク<a>タグを張っていますが
上から2番目と4番目はテキスト表示のみになります。

この様にして「unwrap()」を使うことで、簡単に親要素の制御が可能になります。
※もちろん削除する親要素はリンク<a>タグ以外でも可能です。

親要素の削除はあまり頻繁に使うものではないのですが
知っておくと何かのときに便利になるかと思います。

jQueryで親要素の削除が必要になった際に是非。。。

サンプルファイルをダウンロードしたい方はこちらから

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (1)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

jQueryで親要素を削除する「unwrap()」

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR