問題 × 解決策

jQueryでPC、スマートフォンでの要素の配置換えの方法

問題

jQueryでPC、スマートフォンでの要素の配置換えを行うには?

解決策

ウインドウの幅で処理を分ける。
  1. 特定の親要素の先頭へ移動させるなら、「prependTo」。
  2. 特定の親要素の最後へ移動させるなら、「appendTo」。
  3. 特定の要素の前へ移動させるなら、「insertBefore」。
  4. 特定の要素の後へ移動させるなら、「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/

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

10 + twelve =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧