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

jQueryで親要素を削除する「unwrap()」 最近ではレスポンシブ対応などでの構成を考える上で 要素によって、PC版ではリンクさせるけれど、スマホ版ではリンクさせない、といった HTMLソース上では＜a＞タグをつける必要があっても それを無効化する必要があることによく遭遇します。 そんな時に使える、jQueryで親要素を削除することができる 「unwrap()」が便利だったのでご紹介。 jQueryで親要素を削除する「unwrap()」 サンプルでは、リンクテキストを用意して、 PCでは通常にリンクが張られ、スマホ（iPhone/iPod、Android）では テキスト表示のみになる、といったものを紹介してみます。 HTML側ではリンク＜a＞タグの中に ＜span＞タグで囲ったテキストを入れます。 ◆HTML リンクテキスト そしてjQueryの「unwrap()」を使って スマホの場合はリンクタグを削除する指定を以下のように加えます。 ◆SCRIPT $(function(){ var agent = navigator.userAgent; if(agent.search(/iPhone/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1){ $('span').each(function(){ $(this).unwrap(); }); } }); これを実行させると以下のような感じに。 PCで見るとテキストにはリンクが張られていますが スマホでみた場合はリンクが張られていないテキストのみの表示になります。 上記サンプルではPCとスマホの判別によって、親要素の削除動作を実行させていますが もう１パターンとして、リンクのhrefの内容によって 処理を実行させるようなこともできるので、そのサンプルも紹介してみます。 HTMLでは5つのリンクを用意したとして、 2番目と4番目のリンク先「href」は「#」としておきます。 ◆HTML ・ リンクテキスト１ ・ リンクテキスト２ ・ リンクテキスト３ ・ リンクテキスト４ ・ リンクテキスト５ リンクの中で「href」の値が「#」のものをひろって リンク＜a＞タグを削除させます。 ◆SCRIPT $(function(){ $('a').each(function(){ var hrefUrl = $(this).attr('href'); var urlBlank = '#'; if(hrefUrl === urlBlank){ $(this).children().unwrap(); } }); }); これを実行させると以下のような感じに。 HTMLソース上では全てリンク＜a＞タグを張っていますが 上から2番目と4番目はテキスト表示のみになります。 この様にして「unwrap()」を使うことで、簡単に親要素の制御が可能になります。 ...

http://bit.ly/NnqE1G