jQuery - 要素を別の要素で囲む
公開日：2018-12-12
更新日：2019-05-14
更新日：2019-05-14
1. 概要
指定した要素に対して、別の要素を追加して、外側または内側で囲みます。
$(要素).wrap(要素)
$(要素).wrapAll(要素)
$(要素).wrapInner(要素)
$(要素).unwrap(要素)
2.1 サンプル - wrap()
セレクタで指定された各要素の外側を、引数の要素で囲います。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!-- 画面 -->
<style>#test div { border:3px solid skyblue; }</style>
<div id="test">
<div id="a1">A-1</div>
<div id="a2">A-2</div>
<div id="a3">A-3</div>
</div>
<!-- Script -->
<script>
$(function() {
var waku = $('<div style="border:3px solid red; margin-bottom:4px;"></div>');
$("#test div").wrap(waku);
//これでも動く
//$("#test div").wrap('<div style="border:3px solid red; margin-bottom:4px;"></div>');
});
</script>
</body></html>
実行結果：画面
2.2 サンプル - wrapAll()
セレクタで指定された要素全体の外側を、引数の要素で囲います。
この時、囲む対象外の要素は、後ろに移動させられます。
動きとしては、囲む対象の最初の要素の前に、囲み用の要素が追加され、
その中に、対象の要素を移動していると思われます。
この時、囲む対象外の要素は、後ろに移動させられます。
動きとしては、囲む対象の最初の要素の前に、囲み用の要素が追加され、
その中に、対象の要素を移動していると思われます。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!-- 画面 -->
<style>
#test { border:3px solid skyblue; padding:2px; }
#test div { border:3px solid skyblue; padding:2px; }
</style>
<div id="test">
<span>-----</span>
<div id="a1">A-1</div>
<span>-----</span>
<div id="a2">A-2</div>
<span>-----</span>
<div id="a3">A-3</div>
<span>-----</span>
</div>
<!-- Script -->
<script>
$(function() {
var waku = $('<div style="border:3px solid red; margin-bottom:4px;"></div>');
$("#test div").wrapAll(waku);
});
</script>
</body></html>
実行結果：画面
2.3 サンプル - wrapInner()
セレクタで指定された各要素の内側を、引数の要素で囲います。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!-- 画面 -->
<style>#test div { border:3px solid skyblue; }</style>
<div id="test">
<div id="a1">A-1</div>
<div id="a2">A-2</div>
<div id="a3">A-3</div>
</div>
<!-- Script -->
<script>
$(function() {
var waku = $('<div style="border:3px solid red; margin-bottom:4px;"></div>');
$("#test div").wrapInner(waku);
});
</script>
</body></html>
実行結果：画面
2.4 サンプル - unwrap()
セレクタで指定された各要素の外側にある要素を削除します。
wrap() とは正反対の動作となります。
wrap() とは正反対の動作となります。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!-- 画面 -->
<style>#test div { border:3px solid skyblue; }</style>
<div id="test">
<div id="a1">A-1</div>
<div id="a2">A-2</div>
<div id="a3">A-3</div>
</div>
<!-- Script -->
<script>
$(function() {
var waku = $('<div style="border:3px solid red; margin-bottom:4px;"></div>');
//外枠を追加します
$("#test div").wrap(waku);
//外枠を削除します
$("#test div").unwrap(waku);
});
</script>
</body></html>
実行結果：画面
