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

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

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

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

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

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

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

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

「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

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

終わりに

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

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

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

市川