問題
解決策
- 特定の親要素の先頭へ移動させるなら、「prependTo」。
- 特定の親要素の最後へ移動させるなら、「appendTo」。
- 特定の要素の前へ移動させるなら、「insertBefore」。
- 特定の要素の後へ移動させるなら、「insertAfter」。
PCとスマートフォンのレイアウト事情
レスポンシブで、PCとスマートフォンのレイアウトの事情で要素の順番の入れ替えをしなければいけない場面は少なからず出てくるのではないでしょうか。
そんな時の要素の配置換えの方法をご紹介します。
要素の配置換えの手法
要素の配置換えの手法は以下の4つが代表的です。
- prependTo
- appendTo
- insertBefore
- insertAfter
それぞれの処理内容
| prependTo | 特定の要素の中の先頭へ移動 |
|---|---|
| appendTo | 特定の要素の中の最後へ移動 |
| insertBefore | 特定の要素の前へ移動 |
| insertAfter | 特定の要素の後へ移動 |
記述例
$("移動させたい要素").prependTo('移動先の親となる要素');
$("移動させたい要素").appendTo('移動先の親となる要素');
$("移動させたい要素").insertBefore('移動先の基点となる要素');
$("移動させたい要素").insertAfer('移動先の基点となる要素');
実際のPC時、スマートフォン時で配置換えをする記述例
例として、2つのボックスを用意しました。
1つ目のボックス：クラス「extreme-box」
- PC時 … 「appendTo」でボックスの中の最後に中のラベルを移動します。
- スマートフォン時 … 「prependTo」でボックスの中の先頭に中のラベルを移動します。
2つ目のボックス：クラス「backfront-box」
- PC時 … 「insertAfter」でボックスのキーテキストの後に中のラベルを移動します。
- スマートフォン時 … 「insertBefore」でボックスのキーテキストの前に中のラベルを移動します。
1つ目のボックス：クラス「extreme-box」
DEMOはこちら
テキスト
テキスト
このラベルはPC時は最後に、スマートフォン時は先頭に移動します。
テキスト
テキスト
HTML
<div class="extreme-box">
<p>テキスト</p>
<p>テキスト</p>
<p class="extreme">このラベルはPC時は最後に、スマートフォン時は先頭に移動します。</p>
<p>テキスト</p>
<p>テキスト</p>
</div>CSS
.extreme-box{
padding: 10px;
border: 1px solid #40180A;
}
.extreme-box .extreme{
padding: 2px 10px;
color: #ffffff;
font-weight: bold;
background-color: #40180A;
}
javascript
var w = $(window).width();
if (w <= 767) {
$(".extreme-box .extreme").prependTo('.extreme-box'); // スマートフォン時、先頭へ移動
}else{
$(".extreme-box .extreme").appendTo('.extreme-box'); // PC時、最後へ移動
}
$(window).resize(function(){
var now_w = $(window).width();
if (now_w <= 767 && w > 767) {
$(".extreme-box .extreme").prependTo('.extreme-box'); // スマートフォン時、先頭へ移動
}
if (now_w > 767 && w <= 767) {
$(".extreme-box .extreme").appendTo('.extreme-box'); // PC時、最後へ移動
}
w = now_w;
});ここに注意！
「prependTo」「appendTo」共に移動先の親要素を指定します。
指定先が存在しなかったり、複数存在したりすると処理がおかしくなってしまうので、注意が必要です。
2つ目のボックス：クラス「backfront-box」
DEMOはこちら
このラベルはPC時はキーテキストの後に、スマートフォン時はキーテキストの前に移動します。
テキスト
キーテキストです。
テキスト
テキスト
HTML
<div class="backfront-box">
<p class="backfront">このラベルはPC時はキーテキストの後に、スマートフォン時はキーテキストの前に移動します。</p>
<p>テキスト</p>
<p class="keyelem">キーテキストです。</p>
<p>テキスト</p>
<p>テキスト</p>
</div>CSS
.backfront-box{
padding: 10px;
border: 1px solid #40180A;
}
.backfront-box .backfront{
padding: 2px 10px;
color: #ffffff;
font-weight: bold;
background-color: #40180A;
}
.backfront-box .keyelem{
color: #F15A24;
font-weight: bold;
}
javascript
var w = $(window).width();
if (w <= 767) {
$(".backfront-box .backfront").insertBefore('.backfront-box .keyelem'); // スマートフォン時、クラス「keyelem」の前へ移動
}else{
$(".backfront-box .backfront").insertAfter('.backfront-box .keyelem'); // PC時、クラス「keyelem」の後へ移動
}
$(window).resize(function(){
var now_w = $(window).width();
if (now_w <= 767 && w > 767) {
$(".backfront-box .backfront").insertBefore('.backfront-box .keyelem'); // スマートフォン時、クラス「keyelem」の前へ移動
}
if (now_w > 767 && w <= 767) {
$(".backfront-box .backfront").insertAfter('.backfront-box .keyelem'); // PC時、クラス「keyelem」の後へ移動
}
w = now_w;
});ここに注意！
「prependTo」「appendTo」共に移動先の基点となる要素を指定します。
指定先が存在しなかったり、複数存在したりすると処理がおかしくなってしまうので、注意が必要です。
参考ページ
【prependTo(content) – jQuery 日本語リファレンス】
http://semooh.jp/jquery/api/manipulation/prependTo/content/
【appendTo(content) – jQuery 日本語リファレンス】
http://semooh.jp/jquery/api/manipulation/appendTo/content/
【insertBefore(content) – jQuery 日本語リファレンス】
http://semooh.jp/jquery/api/manipulation/insertBefore/content/
【insertAfter(content) – jQuery 日本語リファレンス】
http://semooh.jp/jquery/api/manipulation/insertAfter/content/
コメント