Webサイト制作におけるjQueryの基本的なメソッド６ - wrap()とremove()
今回はwrap()メソッドとremove()メソッドについて確認する。
その前に、ここまでは既にHTML内にある要素を指定してそれを操作するという方法で確認等を行ってきたが、同じような書き方で、新しく要素を作って、それを操作するということができる。
記述方法は以下の通り。
$('新しく作る要素のHTMLコード').メソッド(パラメータ);要は今まで既存の要素を指定していた部分に、新しく作る要素のHTMLコードを記入すれば良いだけとなる。
では、以下で新しく作った要素に対する操作も含めて確認していく。
要素を追加、削除する機能をもつ基本的なメソッド
- wrap()メソッド：指定した要素を囲む（包む、ラッピングする）
- remove()メソッド：指定した要素を削除する（要素ごと削除する）
wrap()メソッド
記述例は以下の通り。
$("要素1").wrap($("要素2"));要素2で要素1を囲む（包む、ラッピングする）という操作になる。
以下、挙動確認コード。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>wrap()メソッド</title>
<style>
body, div, p, li {
margin: 10px;
padding: 0;
}
.done {
background: #0F0;
}
.dtwo {
width: 200px;
background: #0FF;
}
.dthree {
width: 150px;
background: #F0F;
}
.new {
background: #F93;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div class="done">
<p>done_p1</p>
<p>done_p2</p>
</div>
<div class="dtwo">
<p>dtwo_p1</p>
<p>dtwo_p2</p>
</div>
<div class="dthree">
<p>dthree_p1</p>
<p>dthree_p2</p>
</div>
<script>
$(function(){
$('.done').wrap($('.dtwo')); /* 既存の要素で別の既存の要素を囲む */
$('.dthree').wrap($('<div class="new">新しく追加したdiv</div>')); /* 新しく追加した要素で既存の要素を囲む */
});
</script>
</body>
</html>以下、表示結果。
←クリックで拡大表示
結果から、以下のことが分かる。
- 囲む側（外側）の要素A内に子要素aがあった場合は、指定した囲まれる側（内側）の要素Bよりも前に配置される
- 既存の要素Aを囲む側（外側）として指定した場合、既存の要素Aはそのまま残った状態で、それとは別に複製された要素A'で囲まれる側（内側）の要素Bが囲まれる
- 新しく追加する要素Cで既存の要素Aを囲む場合は、（新しい要素Cが自動で追加されて）指定通りに処理される
基本的なwrap()メソッドの挙動が確認できたところで、以下の疑問が浮かんだ。
- 囲む側や囲まれる側が1つに特定できない場合はどうなるのか？
- 既存の要素で新しく追加する要素を囲む場合は正しく処理されるのか？
この2点を以下で検証する。
以下、検証コード。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>wrap()メソッド</title>
<style>
body, div, p, li {
margin: 10px;
padding: 0;
}
.done {
background: #0F0;
}
.dtwo {
width: 200px;
background: #0FF;
}
.dtwo p {
background: #FC3;
}
.dthree {
width: 150px;
background: #F0F;
}
.error {
background: #CCC;
}
.new {
background: #F00;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div class="done">
<p>done_p1</p>
<p>done_p2</p>
</div>
<div class="dtwo">
<p>dtwo_p1</p>
<p>dtwo_p2</p>
</div>
<div class="dthree">
<p>dthree_p1</p>
<p>dthree_p2</p>
</div>
<script>
$(function(){
$('.done').wrap($('.dtwo p')); /* 1つに限定できないセレクタで、１つに限定できるセレクタを囲む */
$('.dtwo p').wrap($('.done')); /* 1つに限定できるセレクタで、１つに限定できないセレクタを囲む */
$('<div class="error">新しく追加したdiv</div>').wrap($('.dthree')); /* 新しく追加する要素を既存の要素で囲む */
$('.dthree').before($('<div class="new">新しく追加したdiv</div>')); /* 新しく追加する要素をHTML内に挿入する */
$('.new').wrap($('.dthree'));
});
</script>
</body>
</html>以下、表示結果。
←クリックで拡大表示
結果から、以下のことが分かる。
remove()メソッド
記述例は以下の通り。
$("要素").remove();指定した要素を要素ごと削除するという操作になる。
empty()メソッドとの違いは、要素の中身のみが削除されるか、要素ごと削除されるかの違いとなる。
以下、挙動確認コード。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>remove()メソッド</title>
<style>
body, div, p, li {
margin: 10px;
padding: 0;
}
.done {
width: 200px;
height: 50px;
background: #0F0;
}
.dtwo {
width: 200px;
height: 50px;
background: #0FF;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<p>ダミー1</p>
<div class="done">
<p>done_p1</p>
<p>done_p2</p>
</div>
<div class="dtwo">
<p>dtwo_p1</p>
<p>dtwo_p2</p>
</div>
<p>ダミー2</p>
<script>
$(function(){
$('.done').remove();
$('.dtwo').empty();
});
</script>
</body>
</html>以下、表示結果。
←クリックで拡大表示
remove()メソッドを指定した方は要素ごと削除され、empty()メソッドを指定した方は中身が削除された状態の要素のみが残っていることが分かる。
