wrapとは
- ここで説明する wrap とは次の語句からなるjQueryのメソッドです。
- wrap
- 読み: ラップ
意味: 包む
wrapメソッドの概要
このメソッドは、呼び出し元の要素群の各要素を引数で指定した要素、またはタグで囲みます。
もし、呼び出し元の要素群を一括りにしてタグで囲みたい場合は、 wrapAll() を使用してください。
引数にはセレクター、DOMString、要素オブジェクト、jQueryオブジェクト などや 関数の戻り値を指定することができます。
構文
サンプルを見る前に構文を確認しておきます。
$(Selector).wrap(Selector);
$(Selector).wrap(htmlString);
$(Selector).wrap(Element);
$(Selector).wrap(jQuery);
$(Selector).wrap(function);
サンプルコードと実行結果
ここでは、div要素のコンテンツにspan要素を配置しています。
サンプルでは、span要素をメソッドの呼び出し元とし、この要素を class属性 付きの b タグで囲みます。
サンプルコード: CSS
<style>
.clsB{
color: ##red;
}
div{
background-color: ##lightpink;
margin-bottom: 1em;
padding: 0.5em;
}
b{
display: block;
background-color: ##lightblue;
padding: 0.5em;
}
span{
display: block;
background-color: ##lightyellow;
padding: 0.5em;
}
</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">
<div>< span>innerText< /span></div>
<script>...</script>
</body>
- 06: input type="checkbox" (チェックボックスです。クリックすると script 02 ~ 09 のコードが実行されます。)
- 07: div (div要素です。コンテンツをまとめておくコンテナー要素です。)
- 07: span (span要素です。ここでは、この要素がメソッドの呼び出し元になります。)
サンプルコード: script
<script>
$("input[type='checkbox']").click(function(){
if($(this).prop("checked") == true){
$("span").wrap("<b class='clsB'></b>");
}
else{
$("span").unwrap("b");
}
});
</script>
- 02-09: $("input[type='checkbox']").click(function(){処理}) (チェックボックスがクリックされると 処理 を実行します。)
- 03-08: if($(this).prop("checked") == true){}else{} (チェックボックスがチェックされたら 04行目 のコードが実行されます。チェックを外すと 07 行目のコードが実行されます。)
SPAN