jQueryで、ある要素を指定した要素でラップする方法
jQueryで、ある要素を指定された要素で囲む（wrap）方法として、以下のメソッドがあります。
いずれのメソッドも引数（wrappingElement or wrappingFunction）を取ることができます。
wrappingElementには、
- HTML。例えば、$("#sample").wrap("<div id='new'>"）。閉じタグは必要ないので注意！
- selector expression。例えば、$("#sample").wrap("#footer > div"）。.appendTo()のような動作になります。
- jQueryオブジェクト。例えば、$("#sample").wrap($("<div></div>"))。
- DOM要素。
wrappingFunctionには、
- HTML要素かjQueryオブジェクトを返すコールバック関数。例えば、$('.inner').wrap(function() {return '<div class="' + $(this).text() + '"/>';});
wrap、wrapAll、wrapInnerの違いについては下記の通りです。
- wrap
- マッチした要素をそれぞれラップします。
- wrapALL
- 複数マッチした要素があれば、それらをまとめてラップします。
- wrapInner
- マッチした要素の子要素をラップします。
言葉だけでは分かりにくいので、上記のリンク先にサンプルが掲示されているので、参照してください。
あるいは、こちらのjQuery逆引きリファレンスも参考になるかもしれません。
タグ：JavaScript
