Webサイトデザイン制作Tips|Webあんぎゃ

Webサイトデザイン制作における基礎知識を中心に記載しています。
内容は2013/6/7より受講している求職者支援訓練「Webサイト制作科」の授業に基づいています。

 | 

2013-08-18

Webサイト制作におけるjQueryのメソッドの書き方あれこれ

ここ数回に渡ってjQueryの基本的なメソッドについてまとめてきたが、正しい書き方(意図した通りに処理される書き方)がやや曖昧なので、一度確認しておく。

以下、確認コード。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メソッドの書き方あれこれ</title>
<style>
body, div, p, li {
  margin: 10px;
  padding: 0;
}
.done {
 width: 200px;
 background: #0F0;
}
.dtwo {
  width: 200px;
  background: #0FF;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>

<div class="done">
  <p>done</p>
</div>

<div class="dtwo">
  <p>dtwo</p>
</div>

<script>
$(function(){
/* append */
/*$('.dtwo').append($('.done')); /*  ○ */
/*$('.dtwo').append('.done'); /*  × */
/*$('<div class="new">class=new1</div>').append($('.done'));  /*  × */
/*$('<div class="new">class=new2</div>').append('.done'); /*  × */
/*$('.done').append($('<div class="new">class=new3</div>')); /*  ○ */
/*$('.done').append('<div class="new">class=new4</div>');  /*  ○ */
/*$('.done').append('<div class="new">'
+ '<p>class=new5</p>'
+'</div>');  /*  ○ */

/* appendTo */
/*$('.done').appendTo($('.dtwo')); /*  ○ */
/*$('.done').appendTo('.dtwo'); /*  ○ */
/*$('<div class="new">class=new1</div>').appendTo($('.done'));  /*  ○ */
/*$('<div class="new">class=new2</div>').appendTo('.done'); /*  ○ */
/*$('.done').appendTo($('<div class="new">class=new3</div>')); /*  × */
/*$('.done').appendTo('<div class="new">class=new4</div>');  /*  × */
/*$('<div class="new">'
+ '<p>class=new5</p>'
+'</div>').appendTo($('.done'));  /*  ○ */

/* prepend */
/*$('.dtwo').prepend($('.done')); /*  ○ */
/*$('.dtwo').prepend('.done'); /*  × */
/*$('<div class="new">class=new1</div>').prepend($('.done'));  /*  × */
/*$('<div class="new">class=new2</div>').prepend('.done');/*  × */
/*$('.done').prepend($('<div class="new">class=new3</div>')); /*  ○ */
/*$('.done').prepend('<div class="new">class=new4</div>');  /*  ○ */
/*$('.done').prepend('<div class="new">'
+ '<p>class=new5</p>'
+'</div>');  /*  ○ */

/* prependTo */
/*$('.done').prependTo($('.dtwo')); /*  ○ */
/*$('.done').prependTo('.dtwo'); /*  ○ */
/*$('<div class="new">class=new1</div>').prependTo($('.done'));  /*  ○ */
/*$('<div class="new">class=new2</div>').prependTo('.done'); /*  ○ */
/*$('.done').prependTo($('<div class="new">class=new3</div>')); /*  × */
/*$('.done').prependTo('<div class="new">class=new4</div>');  /*  × */
/*$('<div class="new">'
+ '<p>class=new5</p>'
+'</div>').prependTo($('.done'));  /*  ○ */

/* before */
/*$('.done').before($('.dtwo')); /*  ○ */
/*$('.done').before('.dtwo'); /*  × */
/*$('<div class="new">class=new1</div>').before($('.done'));  /*  × */
/*$('<div class="new">class=new2</div>').before('.done'); /*  × */
/*$('.done').before($('<div class="new">class=new3</div>')); /*  ○ */
/*$('.done').before('<div class="new">class=new4</div>');  /*  ○ */
/*$('.done').before($('<div class="new">'
+ '<p>class=new5</p>'
+'</div>'));  /*  ○ */

/* after */
/*$('.dtwo').after($('.done')); /*  ○ */
/*$('.dtwo').after('.done'); /*  × */
/*$('<div class="new">class=new1</div>').after($('.done'));  /*  × */
/*$('<div class="new">class=new2</div>').after('.done'); /*  × */
/*$('.done').after($('<div class="new">class=new3</div>')); /*  ○ */
/*$('.done').after('<div class="new">class=new4</div>');  /*  ○ */
/*$('.done').after($('<div class="new">'
+ '<p>class=new5</p>'
+'</div>'));  /*  ○ */

/* wrap */
/*$('.done').wrap($('.dtwo')); /* ○ */
/*$('.done').wrap('.dtwo'); /* ○ */ 
/*$('.done').wrap($('<div class="new">class=new</div>'));  /* ○ */
/*$('.done').wrap('<div class="new">class=new</div>'); /* ○ */

});
</script>
</body>
</html>

表示結果は省略。

上記コードはすべてコメントアウトしてあるが、一行ずつ確認していった結果を各行の右側のコメント欄に○×で記してある。

上記結果から分かることは以下の通り。

  • 新しく作る要素(まだHTML内に挿入していない状態の要素)は、別の要素を挿入するにあたっての基準にはなれないようなので注意が必要(意図した処理にはならない)
  • (逆に、)既にHTML内にある要素を基準にして、新しく作る要素(まだHTML内に挿入していない状態の要素)を挿入することはできる
  • appendTo()メソッド、prependTo()メソッド、wrap()メソッドに関しては、メソッドの括弧()内に指定する要素をjQueryオブジェクト化するための「$()」は、省略しても正しく(意図した通りに)処理される
  • 新しく作る要素(まだHTML内に挿入していない状態の要素)をメソッドの括弧()内に書く場合は、jQueryオブジェクト化するための「$()」を省略しても正しく(意図した通りに)処理される

Webサイト制作におけるjQueryの基本的なメソッド6 - 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>

以下、表示結果。
f:id:porco_webangya:20130818165519j:image:medium←クリックで拡大表示
結果から、以下のことが分かる。

  • 囲む側(外側)の要素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つに限定できないセレクタで、1つに限定できるセレクタを囲む */
$('.dtwo p').wrap($('.done')); /* 1つに限定できるセレクタで、1つに限定できないセレクタを囲む */
$('<div class="error">新しく追加したdiv</div>').wrap($('.dthree')); /* 新しく追加する要素を既存の要素で囲む */
$('.dthree').before($('<div class="new">新しく追加したdiv</div>')); /* 新しく追加する要素をHTML内に挿入する */
$('.new').wrap($('.dthree'));
});
</script>
</body>
</html>

以下、表示結果。
f:id:porco_webangya:20130818173203j:image:medium←クリックで拡大表示
結果から、以下のことが分かる。

  • 1つに限定できないセレクタで囲んだ場合、一番最初にある要素のみが用いられる
  • 1つに限定できないセレクタを囲んだ場合、複数ある要素がそれぞれ(個別に)指定したセレクタで囲まれる
  • 新しく追加する要素を既存の要素で囲む場合、先に新しく追加する要素をHTML内に挿入しておかないと、wrap()メソッドの処理対象にならない


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>

以下、表示結果。
f:id:porco_webangya:20130818174122j:image:medium←クリックで拡大表示
remove()メソッドを指定した方は要素ごと削除され、empty()メソッドを指定した方は中身が削除された状態の要素のみが残っていることが分かる。

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

前回に引き続き、今回は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>

以下、表示結果。
f:id:porco_webangya:20130818155230j:image:medium←クリックで拡大表示
結果から、以下のことが分かる。

  • 複数の要素をまとめて移動させる場合、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>

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

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

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

機能の概要は既に(前回)書いたので割愛する。

挿入される位置が異なる以外は、append()メソッドおよびappendTo()メソッドと同じ機能なので、前回の記事を見て頂いた人は特に見る必要はないと思われる。

prepend()メソッド

append()メソッドと同様に、複数の要素をまとめてprependすることができる。

以下、基本挙動確認コード。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>prepend()メソッド</title>
<style>
body, div, p {
  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>
</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').prepend($('#dtwo'));
 $('#done').prepend($('.pone'),$('.pfour'),$('.pthree'));
 $('#dtwo').prepend($('#dthree p'));
 $('#done').prepend($('.litwo'));
});
</script>
</body>
</html>

以下、表示結果。
f:id:porco_webangya:20130818151256j:image:medium←クリックで拡大表示
結果から、以下のことが分かる。

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


prependTo()メソッド

以下、挙動確認コード。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>prependTo()メソッド</title>
<style>
body, div, p {
 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>
</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(){
 $('#dtwo').prependTo($('#done'));
 $('#dthree p').prependTo($('#dtwo'));
 $('.litwo').prependTo($('#done'));
});
</script>
</body>
</html>

以下、表示結果。
f:id:porco_webangya:20130818151534j:image:medium←クリックで拡大表示
prepend()メソッドと結果は同じであることが分かる(複数要素をまとめてprependする方法は以下で検証)。

以下でprepend()メソッドとprependTo()メソッドの違いを検証してみる。

prepend()メソッドとprependTo()メソッドの違い

prependTo()メソッドを用いて、複数の要素をまとめてprependしてみる。

以下、検証コード。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>prepend()メソッドとprependTo()メソッドの違い</title>
<style>
body, div, p {
 margin: 10px;
 padding: 0;
}
#done {
 background:#0F0;
}
#dtwo {
 width: 200px;
 background: #0FF;
}
</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>
</div>

<div id="dtwo">
 <p class="pone">dtwo_pone</p>
 <p class="ptwo">dtwo_ptwo</p>
 <p class="pthree">dtwo_pthree</p>
</div>

<script>
$(function(){
 ($('.pone'),$('.ptwo'),$('.pthree')).prependTo($('#done'));
});
</script>
</body>
</html>

以下、表示結果。
f:id:porco_webangya:20130818152351j:image:medium←クリックで拡大表示
結果から、三つ指定したうちの最後の「.pthree」のみが移動していることが分かる。
よってprependTo()メソッドを用いる場合は、複数の要素をまとめてprependすることはできないと考えられる。

また、prependTo()メソッドの場合は、括弧内にjQueryオブジェクト化していない状態でセレクタを指定しても正しく処理されるということなので、prepend()メソッドの場合と比較して検証してみる。

以下、検証コード。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>prepend()メソッドとprependTo()メソッドの違い</title>
<style>
body, div, p {
 margin: 10px;
 padding: 0;
}
#done, #dthree {
 background:#0F0;
}
#dtwo, #dfour {
 width: 200px;
 background: #0FF;
}
</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>
</div>

<div id="dtwo">
 <p class="pone">dtwo_pone</p>
 <p class="ptwo">dtwo_ptwo</p>
 <p class="pthree">dtwo_pthree</p>
</div>

<div id="dthree">
 <p>dthree_p</p>
</div>

<div id="dfour">
 <p class="pone">dfour_pone</p>
 <p class="ptwo">dfour_ptwo</p>
 <p class="pthree">dfour_pthree</p>
</div>

<script>
$(function(){
 $('#done').prepend($('#dtwo .pone'));
 $('#done').prepend('#dtwo .ptwo');
 $('#dfour .pone').prependTo($('#dthree'));
 $('#dfour .ptwo').prependTo('#dthree');
});
</script>
</body>
</html>

以下、表示結果。
f:id:porco_webangya:20130818152522j:image:medium←クリックで拡大表示
一見正しく処理されているようにも見えるが、prepend()の場合はjQueryオブジェクト化していない状態でセレクタを指定すると処理がおかしくなっていることが分かる(セレクタ名のみが移動してテキストとして表示されている。移動元にも移動したはずのものが残っている)。
一方、prependTo()メソッドの方は、正しく処理されていることが分かる。

以上の検証結果から、現状で確認できた(他にもあるかもしれない)prepend()とprependTo()の違いをまとめると下記のようになる。

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

今回からは、Webサイト制作のコーディングにおいて用いるjQueryの基本的なメソッドの中でも、要素の移動や挿入(追加)する機能をもつメソッドをまとめていく。

要素を移動・挿入(追加)する機能をもつ基本的なメソッド
  • append()メソッド:指定した要素内(中身)の最後に挿入する
  • appendTo()メソッド:指定した要素内(中身)の最後に挿入する
  • prepend()メソッド:指定した要素内(中身)の先頭に挿入する
  • prependTo()メソッド:指定した要素内(中身)の先頭に挿入する
  • before()メソッド:指定した要素の前に挿入する
  • after()メソッド:指定した要素の後に挿入する

記述例

共通した記述の仕方は以下の通り。

$("要素1").メソッド($("要素2"));

注意する点は、指定する2つの要素はどちらもjQueryオブジェクト化する必要があるということ。

(先に書く)要素1に対して、(後に書く)要素2を操作するというのが基本となる。

ただし、メソッドの最後に「To」がつくappendTo()メソッドとprependTo()メソッドのみ2つの要素の指定位置が逆になる。

以下で、各メソッドの挙動を確認していく。

append()メソッド

複数の要素をまとめてappendすることが可能で、その場合は下記のように書く。

$("要素1").メソッド($("要素2"),$("要素3"),$("要素4"),…);

メソッドの括弧()内にコンマで区切って追加していく。

ちなみに複数の要素に対して、同じ要素をappendできるのかを試したところ、IEFirefoxで結果が異なったため、そういった指定は不可と考えられる。
以下、NGな指定方法。

($("要素1"),$("要素2")).メソッド($("要素3")); /* これはNG */

以下、基本挙動確認コード。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>append()メソッド</title>
<style>
body, div, p {
 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>
</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').append($('#dtwo'));
 $('#done').append($('.pone'),$('.pfour'),$('.pthree'));
 $('#dtwo').append($('#dthree p'));
 $('#done').append($('.litwo'));
});
</script>
</body>
</html>

以下、表示結果。
f:id:porco_webangya:20130818134339j:image:medium←クリックで拡大表示
結果から、以下のことが分かる。

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

appendTo()メソッド

以下、挙動確認コード。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>appendTo()メソッド</title>
<style>
body, div, p {
 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>
</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(){
 $('#dtwo').appendTo($('#done'));
 $('#dthree p').appendTo($('#dtwo'));
 $('.litwo').appendTo($('#done'));
});
</script>
</body>
</html>

以下、表示結果。
f:id:porco_webangya:20130818135747j:image:medium←クリックで拡大表示
append()メソッドと結果は同じであることが分かる(複数要素をまとめてappendする方法は以下で検証)。

以下でappend()メソッドとappendTo()メソッドの違いを検証してみる。

append()メソッドとappendTo()メソッドの違い

appendTo()メソッドを用いて、複数の要素をまとめてappendしてみる。

以下、検証コード。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>append()メソッドとappendTo()メソッドの違い</title>
<style>
body, div, p {
 margin: 10px;
 padding: 0;
}
#done {
 background:#0F0;
}
#dtwo {
 width: 200px;
 background: #0FF;
}
</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>
</div>

<div id="dtwo">
 <p class="pone">dtwo_pone</p>
 <p class="ptwo">dtwo_ptwo</p>
 <p class="pthree">dtwo_pthree</p>
</div>

<script>
$(function(){
 ($('.pone'),$('.ptwo'),$('.pthree')).appendTo($('#done')); /* これはNG */

});
</script>
</body>
</html>

以下、表示結果。
f:id:porco_webangya:20130818143851j:image:medium←クリックで拡大表示
結果から、三つ指定したうちの最後の「.pthree」のみが移動していることが分かる。
よってappendToを用いる場合は、複数の要素をまとめてappendすることはできないと考えられる。

また、appendTo()メソッドの場合は、括弧内にjQueryオブジェクト化していない状態でセレクタを指定しても正しく処理されるということなので、append()メソッドの場合と比較して検証してみる。

以下、検証コード。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>append()メソッドとappendTo()メソッドの違い</title>
<style>
body, div, p {
 margin: 10px;
 padding: 0;
}
#done, #dthree {
 background:#0F0;
}
#dtwo, #dfour {
 width: 200px;
 background: #0FF;
}
</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>
</div>

<div id="dtwo"> 
 <p class="pone">dtwo_pone</p>
 <p class="ptwo">dtwo_ptwo</p>
 <p class="pthree">dtwo_pthree</p>
</div>

<div id="dthree">
 <p>dthree_p</p>
</div>

<div id="dfour">
 <p class="pone">dfour_pone</p>
 <p class="ptwo">dfour_ptwo</p>
 <p class="pthree">dfour_pthree</p>
</div>

<script>
$(function(){
 $('#done').append($('#dtwo .pone'));
 $('#done').append('#dtwo .ptwo'); /* これはNG */
 $('#dfour .pone').appendTo($('#dthree'));
 $('#dfour .ptwo').appendTo('#dthree');
});
</script>
</body>
</html>

以下、表示結果。
f:id:porco_webangya:20130818143721j:image:medium←クリックで拡大表示
一見正しく処理されているようにも見えるが、append()の場合はjQueryオブジェクト化していない状態でセレクタを指定すると処理がおかしくなっていることが分かる(中身に#が付いている。移動元にも移動したはずのものが残っている)。
一方、appendTo()メソッドの方は、正しく処理されていることが分かる。

以上の検証結果から、現状で確認できた(他にもあるかもしれない)append()とappendTo()の違いをまとめると下記のようになる。

思ってたより長くなったので、残りのメソッドについては次回以降で確認していく。

 | 
Connection: close