wrapInnerとは
- ここで説明する wrapInner とは次の語句からなるjQueryのメソッドです。
- wrap
- 読み: ラップ
意味: 包む - inner
- 読み: インナー
意味: 内的、内部
wrapInnerメソッドの概要
このメソッドは、呼び出し元の要素のインナーの両端に新しいタグを挿入しコンテンツを内包します。
使用する上での注意点として、引数には開始タグと終了タグがある要素を指定してください。 例えば input 等の置換要素は開始タグのみで構成されますが、この様なタグを引数に指定しないでください。
構文
サンプルを見る前に構文を確認しておきます。
$(Selector).wrapInner(htmlString);
$(Selector).wrapInner(Selector);
$(Selector).wrapInner(Element);
$(Selector).wrapInner(jQuery);
$(Selector).wrapInner(function);
サンプルコードと実行結果
ここでは、div要素のコンテンツにspan要素を配置しています。
サンプルでは、div要素をメソッドの呼び出し元とし、そのインナーの両端に bタグを挿入します。 つまり簡単にいうと、ここでは div 内のコンテンツを bタグで囲むということになります。
サンプルコード: CSS
<style>
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要素です。チェックボックスにチェックが入ると、この要素はb要素で囲まれます。)
サンプルコード: script
<script>
$("input[type='checkbox']").click(function(){
if($(this).prop("checked") == true){
$("div").wrapInner("<b />");
}
else{
$("span").unwrap("b");
}
});
</script>
- 02-09: $("input[type='checkbox']").click(function(){処理}) (チェックボックスがクリックされると 処理 を実行します。)
- 03-08: if($(this).prop("checked") == true){}else{} (チェックボックスがチェックされたら 04行目 のコードが実行されます。チェックを外すと 07 行目のコードが実行されます。)
SPAN