jQuery 基礎のチュートリアル

jQuery エフェクト

wrap()メソッドは指定されたHTML要素を使用して各選択された要素を包み込むことを行います。

使用unwrap()メソッドは選択された要素の親要素を削除します。

包み込む要素：

$(selector).wrap(wrappingElement)

要素を関数で包装する：

$(selector).wrap(function(index))

DIV要素を各<p>要素の周りに包み込んでいます：

サンプル

$("button").click(function(){
　　$("p").wrap("<div></div>");
});

この例では、document.createElement()を使用してDIV要素を作成し、それを各<p>要素の周りに包み込んでいます：

サンプル

$("button").click(function(){
　　$("p").wrap(document.createElement("div"));
});

要素を関数で包装する：

サンプル

$("button").click(function(){
　　$("p").wrap(function(){
　　　　　　return　document.createElement("div");
　　});
});

要素の包装と展開の間で切り替え：

サンプル

$("#btn1").click(function(){
　　$("p").wrap("<div></div>");
});
$("#btn2").click(function(){
　　$("p").unwrap();
});

パラメータ	説明
wrappingElement	各選択された要素を包む構造を指定可能な値： HTML要素 DOM要素 jQueryオブジェクト
function(index)	各選択された要素を返す関数を指定 index-集合内の要素のインデックス位置を返す