個人的にはあまり使う機会がなかった .wrap() ですが、先日これを使って問題を解決したのでその経緯をメモしておこうと思います。
.wrap()の基本機能
.wrap()は名前の通り、指定した要素を何かしらで包むためのコードです。
例えば下記のように記述すると、
<!--htmlの記述--> <p class=“test”>コードをテストしてみる</p>
//JSの記述 $(‘p.test’).wrap(‘<div class=“wrap”></div>’);
htmlはこのように書き換えられます。
<div class=“wrap”> <p class=“test”>コードをテストしてみる</p> </div>
指定したpタグをwrapというクラスが振られたdivタグで包めるわけです。
いつ使うの？
「いや、最初からhtmlで書けばいいだろ」と思いますよね。僕も思います。
わざわざJSであとからDOM要素を増やす必要はなかなか見出せません。僕自身、はじめにjQueryをざっと勉強したときに見かけた程度でこれまで使う機会がありませんでした。
しかし、先日ついに.wrap()が役に立つ状況に遭遇。
ずばり、JSプラグインで生成されたDOM要素に変更を加えたい場合に便利でした。
ちょっとわかりづらいと思うので、順を追って書いていきます。
Webサイトを作るうえでスライダーやライトボックスはよく使われると思います。
そして大体のプラグインは、リッチな挙動をさせるためにDOM要素を追加して動作しています。この際に追加されるDOM要素に対してはプラグイン側で用意しているCSSで装飾されていることが多く、挙動に関わる記述がされています。
ボタンやナビゲーションに関する部分は、比較的変えられるように出来ているので良いのですが、大元のレイアウトに対する拡張性は低いことがままあります（まあ仕方ないですが…）。
デザインの都合上、どうしても既存のレイアウトからこの部分は変更したいって場合もあると思います。しかしDOMを生成しているプラグインのJS本体は難解だし、CSSの変更だけだと限界があるし…。
そんな場合に.wrap()が役に立ちました。
プラグインのコールバックとして.wrap()を発火させることで、プラグインによって生成されるDOM要素に対応するための任意のタグを追加することが出来ます。ここで追加した任意のタグはプラグインによってclassやstyleを書き換えられる心配はないので安心してstyleを指定することが出来る。
同じ理屈で.beforeや.appendなんかも利用できると思います。ただ、ある要素のレイアウトに変更を加えたい場合には前後へのインサートよりも、その要素を包む方が便利でしょう。
コールバックとして気軽に使えるという部分がミソでしょうかね。
言ってることが間違ってたりよくわからない等あれば気軽にコメントください。
