wrapを使って指定した要素をタグで囲む方法

jQueryで要素を囲む方法を調べた際に出てくるのが「wrap」、「wrapInner」、「wrapAll」です。
今回はこの3種類のメソッドの使い方と、ちょっとした応用を１つ紹介します。

wrapについて

wrapを使うと指定したHTML要素で、対象の要素を１つずつ囲むことができます。

<p>ダミーテキスト１</p>
<p>ダミーテキスト２</p>
<p>ダミーテキスト３</p>

上記のようなHTMLに対して下記のように指定すると

$('p').wrap('<div></div>');

このような形に１つずつ囲む事が出来ます。

<div><p>ダミーテキスト１</p></div>
<div><p>ダミーテキスト２</p></div>
<div><p>ダミーテキスト３</p></div>

wrapInnerについて

wrapInnerを使うと対象の要素の中身を丸ごと囲む事が出来ます。

<p>ダミーテキスト１</p>
<p>ダミーテキスト２</p>
<p>ダミーテキスト３</p>

wrapInnerの場合は対象の中身をまとめて囲うためこのようになります。

$('p').wrapInner('<span></span>');

<p><span>ダミーテキスト１</span></p>
<p><span>ダミーテキスト２</span></p>
<p><span>ダミーテキスト３</span></p>

wrapAllについて

wrapAllを使うと対象に当てはまる要素を全て１つにまとめて囲むことができます。

<div class="textbox">
    <p>ダミーテキスト１</p>
    <p>ダミーテキスト２</p>
    <p>ダミーテキスト３</p>
</div>

上記のようなHTML構造の際に、wrapAllを使うとこのようになります。

$('.textbox p').wrapAll('<div class="inner"></div>');

<div class="textbox">
    <div class="inner">
        <p>ダミーテキスト１</p>
        <p>ダミーテキスト２</p>
        <p>ダミーテキスト３</p>
    </div>
</div>

wrapAllの注意点

<div class="textbox">
    <p>ダミーテキスト１</p>
    <p>ダミーテキスト２</p>
    <p>ダミーテキスト３</p>
</div>
<div class="textbox">
    <p>ダミーテキスト４</p>
</div>

上記のように、複数の同じ要素がある際にそのまま同じ処理を行うと、１つ目の要素の方に引っ張られ下記のような形になってしまいます。

<div class="textbox">
    <div class="inner">
        <p>ダミーテキスト１</p>
        <p>ダミーテキスト２</p>
        <p>ダミーテキスト３</p>
        <p>ダミーテキスト４</p>
    </div>
</div>

<div class="textbox">
</div>

今回やりたかった事

<ul class="list">
    <li>
        <div>除外したい</div>
        <p>ダミーテキスト１</p>
        <p>ダミーテキスト２</p>
        <p>ダミーテキスト３</p>
        <div>除外したい</div>
    </li>
    <li>
        <div>除外したい</div>
        <p>ダミーテキスト４</p>
        <p>ダミーテキスト５</p>
        <p>ダミーテキスト６</p>
        <div>除外したい</div>
    </li>
</ul>

上記のような時に、liの中のpタグのみをその場で別のタグで囲みたかったのですが、ここまでで説明した「wrap」、「wrapInner」、「wrapAll」をそのまま使うだけでは上手く対応出来なかったので下記のように対応した結果、目的の形に整形する事が出来ました。

var count = $('.list li').length;
for(let i = 0; i < count; i++){
    $('.list li').eq(i).children('*:not( div )').wrapAll('<div class="inner"></div>');
}

<ul class="list">
    <li>
        <div>除外したい</div>
        <div class="inner">
            <p>ダミーテキスト１</p>
            <p>ダミーテキスト２</p>
            <p>ダミーテキスト３</p>
        </div>
        <div>除外したい</div>
    </li>
    <li>
        <div>除外したい</div>
        <div class="inner">
            <p>ダミーテキスト４</p>
            <p>ダミーテキスト５</p>
            <p>ダミーテキスト６</p>
        </div>
        <div>除外したい</div>
    </li>
</ul>