最近ではレスポンシブ対応などでの構成を考える上で
要素によって、PC版ではリンクさせるけれど、スマホ版ではリンクさせない、といった
HTMLソース上では＜a＞タグをつける必要があっても
それを無効化する必要があることによく遭遇します。
そんな時に使える、jQueryで親要素を削除することができる
「unwrap()」が便利だったのでご紹介。
jQueryで親要素を削除する「unwrap()」
サンプルでは、リンクテキストを用意して、
PCでは通常にリンクが張られ、スマホ（iPhone/iPod、Android）では
テキスト表示のみになる、といったものを紹介してみます。
HTML側ではリンク＜a＞タグの中に
＜span＞タグで囲ったテキストを入れます。
◆HTML <a href="https://black-flag.net" target="_blank" rel="noopener"><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とスマホの判別によって、親要素の削除動作を実行させていますが
もう１パターンとして、リンクのhrefの内容によって
処理を実行させるようなこともできるので、そのサンプルも紹介してみます。
HTMLでは5つのリンクを用意したとして、
2番目と4番目のリンク先「href」は「#」としておきます。
◆HTML <ul> <li>・<a href="https://black-flag.net" target="_blank" rel="noopener"><span>リンクテキスト１</span></a></li> <li>・<a href="#"><span>リンクテキスト２</span></a></li> <li>・<a href="https://black-flag.net" target="_blank" rel="noopener"><span>リンクテキスト３</span></a></li> <li>・<a href="#"><span>リンクテキスト４</span></a></li> <li>・<a href="https://black-flag.net" target="_blank" rel="noopener"><span>リンクテキスト５</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で親要素の削除が必要になった際に是非。。。