wrapAllとは
- ここで説明する wrapAll とは次の語句からなるjQueryのメソッドです。
- wrap
- 読み: ラップ
意味: 包む - all
- 読み: オール
意味: 全て
wrapAllメソッドの概要
このメソッドは、呼び出し元の要素群を、引数で指定した要素、またはタグで囲みます。
もし、呼び出し元の要素群の各要素を個別にタグで囲みたい場合は、 wrap() を使用してください。
引数にはセレクター、DOMString、要素オブジェクト、jQueryオブジェクト などや 関数の戻り値を指定することができます。
構文
サンプルを見る前に構文を確認しておきます。
$(Selector).wrapAll(htmlString);
$(Selector).wrapAll(Selector);
$(Selector).wrapAll(Element);
$(Selector).wrapAll(jQuery);
$(Selector).wrapAll(function);
サンプルコードと実行結果
ここでは、題材として3つの span 要素を配置しています。
サンプルでは、この span 要素群をメソッドの呼び出し元とし、この要素群を div タグで囲みます。
サンプルコード: CSS
<style>
div{
background-color: ##lightpink;
margin-bottom: 1em;
padding: 0.5em;
}
span{
display: block;
background-color: ##lightblue;
padding: 0.5em;
}
input[type="checkbox"]{
width: 30px;
height: 30px;
}
</style>
サンプルコード: HTML
<head>
<style>...</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<input type="checkbox">
< span>Element SPAN< /span>
< span>Element SPAN< /span>
< span>Element SPAN< /span>
<script>...</script>
</body>
- 06: input type="checkbox" (チェックボックスです。クリックすると script 02 ~ 09 のコードが実行されます。)
- 07, 08, 09: span (span要素です。ここでは、この要素群がメソッドの呼び出し元になります。チェックボックスにチェックが入ると、この要素群はdiv要素で囲まれます。)
サンプルコード: script
<script>
$("input[type='checkbox']").click(function(){
if($(this).prop("checked") == true){
$("span").wrapAll("<div>");
}
else{
$("span").unwrap("div");
}
});
</script>
- 02-09: $("input[type='checkbox']").click(function(){処理}) (チェックボックスがクリックされると 処理 を実行します。)
- 03-08: if($(this).prop("checked") == true){}else{} (チェックボックスがチェックされたら 04行目 のコードが実行されます。チェックを外すと 07 行目のコードが実行されます。)
Element SPAN
Element SPAN
Element SPAN