Webサイト制作におけるjQueryの基本的なメソッド５ - before()とafter()

ｊQuery

前回に引き続き、今回はbefore()メソッドとafter()メソッドについて確認する。

before()メソッド

以下、挙動確認コード。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>before()メソッド</title>
<style>
body, div, p, li {
  margin: 10px;
  padding: 0;
}
#done {
  background: #0F0;
}
#dtwo {
  width: 200px;
  background: #0FF;
}
#dthree {
  width: 150px;
  background: #F0F;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div id="done">
  <p>done_p</p>
  <p>done_p</p>
</div>

<div id="dtwo">
 <p>dtwo_p</p>
 <p>dtwo_p</p>
</div>

<div id="dthree">
 <p class="pone">dthree_pone</p>
 <p class="ptwo">dthree_ptwo</p>
 <p class="pthree">dthree_pthree</p>
 <ul>
  <li class="lione">dthree_ul_lione</li>
  <li class="litwo">dthree_ul_litwo</li>
 </ul>
 <div>
  <p>dthree_div_p</p>
 </div>
  <p class="pfour">dthree_pfour</p>
</div>

<script>
$(function(){
　$('#done').before($('#dtwo'));
　$('#done').before($('.pone'),$('.pfour'),$('.pthree'));
　$('#dtwo').before($('#dthree p'));
　$('#done').before($('.litwo'));
});
</script>
</body>
</html>

以下、表示結果。
←クリックで拡大表示
結果から、以下のことが分かる。

  • 複数の要素をまとめて移動させる場合、before()メソッドの括弧内に書いた順に移動する（移動後、その順番で並ぶ）※上記例の「.pfour」、「.pthree」に対する結果参照
  • もとは兄弟関係でないものでも、同じ条件で抽出されたものは、移動後は兄弟扱いになる　※上記例の「#dthree p」に対する結果参照
  • このような指定の仕方が正しいのかどうかは不明だが、「ul li」の「li」のみを移動させた場合でも、処理はされる（「li」が単独で移動する）※上記例の「.litwo」に対する結果参照
after()メソッド

以下、挙動確認コード。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>after()メソッド</title>
<style>
body, div, p, li {
  margin: 10px;
  padding: 0;
}
#done {
  background: #0F0;
}
#dtwo {
  width: 200px;
  background: #0FF;
}
#dthree {
  width: 150px;
  background: #F0F;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div id="done">
  <p>done_p</p>
  <p>done_p</p>
</div>

<div id="dtwo">
 <p>dtwo_p</p>
 <p>dtwo_p</p>
</div>

<div id="dthree">
 <p class="pone">dthree_pone</p>
 <p class="ptwo">dthree_ptwo</p>
 <p class="pthree">dthree_pthree</p>
 <ul>
  <li class="lione">dthree_ul_lione</li>
  <li class="litwo">dthree_ul_litwo</li>
 </ul>
 <div>
  <p>dthree_div_p</p>
 </div>
  <p class="pfour">dthree_pfour</p>
</div>

<script>
$(function(){
　$('#done').after($('#dtwo'));
　$('#done').after($('.pone'),$('.pfour'),$('.pthree'));
　$('#dtwo').after($('#dthree p'));
　$('#done').after($('.litwo'));
});
</script>
</body>
</html>

以下、表示結果。
←クリックで拡大表示
結果から、挿入する位置が異なる以外は、before()メソッドと同様の機能を持つことが分かる。