本日はJQueryの要素を囲ってくれるのwrap系メソッドをご紹介したいと思います。
それではいってみましょう＼(^^)／
Menu
wrapメソッド
概要
指定した要素を個々に囲います。
構文
wrap(囲う要素)
サンプル
wrapメソッドでPタグをdivで個々に囲います。
1 2 3 4 5 | $(function() { $(".sample").click(function() { $(".sample > p").wrap("<div></div>"); }); }); |
【実行前】
【実行後】
pタグをdivで個々に囲ってるのがわかります。
wrapAllメソッド
概要
指定した要素をまとめて囲います。
構文
wrapAll(囲う要素)
サンプル
P要素をdivでまとめて囲います。
1 2 3 4 5 | $(function() { $(".sample").click(function() { $(".sample > p").wrapAll("<div></div>"); }); }); |
【実行前】
【実行後】
pタグ群をdivでまとめて囲ってるのがわかります。
wrapInnerメソッド
概要
インナーテキスト（文字）を囲います。
構文
wrapInner(囲う要素)
サンプル
wrapInnerメソッドでsampleクラスi要素でインナーテキストを囲います。
1 2 3 4 5 | $(function() { $(".sample").click(function() { $(".sample > p").wrapInner("<i></i>"); }); }); |
【実行前】
【実行後】
インナーテキストをiタグ（斜め文字）で個々に囲ってるのがわかります。
まとめ
今回はJQueryの囲い系の処理を実行してみました。以前サイトを作成し、修正が必要な箇所が膨大にあった際に、wrapメソッドを使用して非常に便利に機能したのを覚えています。
ですので使い方次第では重宝できる機能になると思いますので、いずれ使う時が訪れた際は是非ご使用してみてください！
以上です。
