unwrapとは
- ここで説明する unwrap とは次の語句からなるjQueryのメソッドです。
- un
- 読み: アン
意味: ～でない、～しない、否定の意味 - wrap
- 読み: ラップ
意味: 包む
unwrapメソッドの概要
このメソッドは、呼び出し元要素の親要素を外します。
親要素を外すといってはいますが、親要素のタグを削除するという意味です。
これは、あくまでも親要素のタグを消すだけで、親要素のコンテンツ内のテキストノードなどは残ることになります。
このメソッドは安易に繰り返し使うと呼び出し元要素の親要素のタグが次々と削除されるので、条件付きで実行されるように調整することが望ましい場合があります。 引数を空にすると前述のとおり、親のタグが次々と削除されるので引数にセレクターを指定することで、これを回避することが可能です。
構文
サンプルを見る前に構文を確認しておきます。
$(Selector).unwrap([Selector])サンプルコードと実行結果
ここでは、div要素のコンテンツにb要素とspan要素を配置しています。 bが親要素で、spanが子要素になります。
サンプルでは、span要素をメソッドの呼び出し元とし、親要素のタグを削除します。 つまり簡単にいうと、ここでは 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><b>B< span>innerText< /span>B</b></div>
<script>...</script>
</body>
- 06: input type="checkbox" (チェックボックスです。クリックすると script 02 ~ 09 のコードが実行されます。)
- 07: div (div要素です。コンテンツをまとめておくコンテナー要素です。)
- 07: b (b要素です。ここでは、この要素がunwrap()のセレクターに一致します。)
- 07: span (span要素です。ここでは、この要素がメソッドの呼び出し元になります。)
サンプルコード: script
<script>
$("input[type='checkbox']").click(function(){
if($(this).prop("checked") == true){
$("span").unwrap("b");
}
else{
$(".div").wrapInner("<b></b>");
}
});
</script>
- 02-09: $("input[type='checkbox']").click(function(){処理}) (チェックボックスがクリックされると 処理 を実行します。)
- 03-08: if($(this).prop("checked") == true){}else{} (チェックボックスがチェックされたら 04行目 のコードが実行されます。チェックを外すと 07 行目のコードが実行されます。)
BSPANB