jQueryで特定の要素を囲むwrap、wrapInner、wrapAll。使い方と解除と注意点

update:2023.8.13　111view

jQueryで特定の要素を囲むwrap、wrapInner、wrapAll。使い方と解除と注意点

特定の要素を指定したタグで囲ってくれるwrap、wrapInner、wrapAll。

という記述を動的にこのようにしてくれるんです！

タグ内を<span>で内側に囲む！ということもできるんです。

使える場面も多く、簡単なコードで実装できます。

記事のもくじ

wrapを使った囲み方
wrapInnerを使った囲み方
wrapAllを使った囲み方
wrapの解除
囲むのは一度きり！のときの判別方法
wrapが効かないとき

wrapを使った囲み方

指定したタグをwrapすると、外側に指定したタグで囲ってくれます。

<p class="text01">テキストが入ります</p>

<script>
$(function() {
  //囲みたいタグを取得
  var element = $('p.text01');
  element.wrap('<div></div>');
});
</script>

この記述でtext01クラスのpタグは下記のように出力されます。

<div><p class="text01">テキストが入ります</p></div>

divタグにクラス指定もできます。

  element.wrap('<div class="div01"></div>');

の記述で下記になります。

<div class="div01"><p class="text01">テキストが入ります</p></div>

wrapInnerを使った囲み方

指定したタグをwrapInnerすると、内側に指定したタグで囲ってくれます。

<p class="text01">テキストが入ります</p>

<script>
$(function() {
  //囲みたいタグを取得
  var element = $('p.text01');
  element.wrapInner('<span class="span01"></span>');
});
</script>

この記述でtext01クラスのpタグは下記のように出力されます。

<p class="text01"><span class="span01">テキストが入ります</span></p>

wrapAllを使った囲み方

wrapAllは指定した要素をまとめて囲ってくれます。

<p class="text01">テキストが入ります</p>
<p class="text02">テキストが入ります</p>
<p class="text03">テキストが入ります</p>

<script>
$(function() {
  //囲みたいタグを取得
  var element = $('p');
  element.wrapAll('<div class="wrap"></div>');
});
</script>

この記述でtext01～03クラスのpタグは下記のように出力されます。

<div class="wrap">
<p class="text01">テキストが入ります</p>
<p class="text02">テキストが入ります</p>
<p class="text03">テキストが入ります</p>
</div>

wrapの解除

囲ったけど、削除したいときはunwrapを使います。

unwrapは指定した要素の親要素を削除になります。

<p class="text01"><span class="span01">テキストが入ります</span></p>
//wrapで上記で書き出された場合

<script>
$(function() {
  //囲みたいタグを取得
  var element = $('span.span01');
  element.unwrap();
});
</script>

この記述でspan01クラスの親要素が削除されるので下記のように出力されます。

<span class="span01">テキストが入ります</span>

囲むのは一度きり！のときの判別方法

レスポンシブでブラウザのサイズによってwrapを使うか判別しタグを囲んだところ、ブラウザのサイズが変わるたびにタグが囲まれるためタグが複数になる場面がありました。
こんな感じに(-_-;)

<div><div><div><p class="text01">テキストが入ります</p></div></div></div>

囲むタグにクラスを付与し、タグが入っていない場合のみ囲む、という処理にしました。

$(window).resize(function () {
  const width = $(window).width();
  if(width <= 768){
    if($('.hhh').length == 0) {
      $('p.text01').wrap('<div class="hhh"></div>');
    }
  }else{
    if($('.hhh').length !== 0) {
       $('p.text01').unwrap();
    }
  }
});

これで768以下の場合、hhhクラスがなければ、divのhhhクラスで囲む、769以上の場合にhhhクラスがある場合は削除する、という処理ができました！