【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

【jQuery】コンテンツの表示順を簡単に入れかえる方法

【jQuery】コンテンツの表示順を簡単に入れかえる方法

JQueryを使ってコンテンツの表示順を入れかえたい

こんにちは、サポート部の市川です。毎日暑い日が続いていますが、体調などは崩されていませんでしょうか。

さて、Web制作をしていると、ページのテキストや画像といったコンテンツの順番を入れかえたいという状況がでてくるかと思います。

多くの場合、HTMLを単に書き換えるだけでよいのですが、例えばCMSでの会員登録画面の「名前」や「会社名」、「住所」といった項目の表示順を入れかえたいといった場合にシステムの都合上、設定で簡単に入れ替えることができない場合もあると思います。

今回はそのような時に、Jqueryを使って簡単にコンテンツの表示順の入れかえするための方法を紹介します。

【Jquery】beforeメソッドとafterメソッドを使ってdivコンテンツを入れ替える

次のURLで表示されるページのdivでくくられた5つのコンテンツ「A・B・C・D・E」をご覧ください。
http://ichikawa-advance.aispr.jp/change_order.html
abcde

HTMLは下記の通りとなっています。このHTML上のID名a〜eが与えられたdivコンテンツの表示順をJqueryを使って表示を入れ替えていきます。

<section>
  <div id="a">
    <h1>A</h1>
  </div>
  <div id="b">
    <h1>B</h1>
  </div>
  <div id="c">
    <h1>C</h1>
  </div>
  <div id="d">
  <h1>D</h1>
  </div>
  <div id="e">
    <h1>E</h1>
  </div>
</section>

beforeメソッド使って入れかえる

beforeメソッドを使ってBとAをいれかえてBACDEの順に入れかえます

$(function(){
  $('#a').before($('#b'));
});

入れ替えた結果↓↓
http://ichikawa-advance.aispr.jp/change_order_before.html
bacde

「beforeメソッド」は指定した要素の前に引数となる要素を挿入するメソッドです。
事例ではid=”a”のdivコンテンツAの前にid=”b”のdivコンテンツBを入れ替えました。

afterメソッド使って入れかえる

afterメソッドを使ってAとEをいれかえてEBCDAの順に入れかえます

$(function(){
  $('#e').after($('#b'),$('#c'),$('#d'),$('#a'));
});

入れ替えた結果↓↓
http://ichikawa-advance.aispr.jp/change_order_after.html
ebcda

「afterメソッド」は指定した要素の後に引数となる要素を挿入するメソッドです。
事例ではdivコンテンツEの後にB,C,D,Aの順にコンテンツを挿入しました。afterメソッドの引数にはカンマで区切って複数の要素を指定できます。指定した引数の順番にコンテンツが並ぶのがポイントです。

終わりに

今回ご紹介した内容について、HTML,CSS,Javascript(Jquery)を1ファイルにまとめたサンプルコードを下記にご用意しました。

view-source:http://ichikawa-advance.aispr.jp/change_order_try.html

ぜひともデスクトップ上でサンプルコードを貼り付けたhtmlファイルを作成してブラウザ上で動きをテストしてみてください。Jqueryの部分のコードを書き換えたりして、順番を入れかえるなど試すことでより理解が深まることでしょう。

市川

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+