Jqueryを使って一つのチェックボックスで複数の要素の位置をずらす方法

Question

<table>
  <thead>
    <th class="sort" data-sort="group-a">A</th>
    <th class="sort" data-sort="group-b">B</th>
    <th class="sort" data-sort="group-c">C</th>
  </thead>
  <tbody>
    <tr>
      <td class="group-a before01">内容01-1</td>
      <td class="group-a after01">内容01-2</td>
      <td class="group-b">内容02</td>
      <td class="group-c">内容03</td>
    </tr><tr>
      <td class="group-a">内容04</td>
      <td class="group-b before01">内容05-1</td>
      <td class="group-b after01">内容05-2</td>
      <td class="group-a">内容06</td>
    </tr>
・
・
・
  <tbody>
</table>

<input type="checkbox" id="change01"><label for="change01">変更</label>
    

この様なhtmlでチェックボックス「ID：change01」をクリックした時に、クラス「before01」と「after01」の表示を切り替えたいと思っています。
各列にList.jsによるソート(指定したクラスでソート)をかけているので、要素の位置を前後に入れ替えた上で要素を表示/非表示にしています。

$('#change01').change(function(){
  if ($(this).is(':checked')) {
$('.after01').after($('.before01')).show();
$('.before01').hide();
} else {
$('.before01').after($('.after01')).show();
$('.after01').hide();
}
});

.after01{display:none;}

ここまでは出来たのですが、チェックを外した際にすべての値が返ってきてしまいました。
どうしたら各要素毎に入れ替えと表示/非表示ができるのでしょうか？
教えていただけるとありがたいです。
よろしくお願いします。

Comments

[kyoya0819]

list.jsを使ったことがないので申し訳ございませんが単純なshow,hideではダメな理由をお教えいただけませんか？

[babystardust]

クラス毎のソートをしているのですが、同じ行に同じクラスを持つ要素があると先頭の要素が対象になるみたいで、hide/showだとソートが適用されませんでした…

[yambejp]

入れ替えるのはよいとしてtd要素をshow/hideするのはおかしくないですか？

[babystardust]

表示上ではデフォルトが「内容01-1/内容02/内容03、内容04/内容05-1/内容06」で、チェックボックスにチェックを入れると「内容01-2/内容02/内容03、内容04/内容05-2/内容06」とした上でソートを効かせたいので、要素を入れ替えた後にhide/showを入れています。

Answer 1

list.js でどのような並べ替えをしているのか不明なので、「before01」と「after01」の前後を入れ替える意味が分かりません。
前後を入れ替えても、並べ替えるのでしょ？
かつ、片方しか表示しないのに、入れ替える必要はあるの？
と疑問がふつふつとわくのですが、まあ、それはスルーして、、、、

ここまでは出来たのですが、チェックを外した際にすべての値が返ってきてしまいました。

そのように見えるのは、$('.after01') $('.before01') は複数の要素を持っているからです。

$('.after01').after($('.before01')) とすると、各after01クラスの後に、内容01-1と内容05-1のブロックを挿入することになります。
よって、チェックを入れたり、外したりする毎にどんどん増殖します。

それぞれ単独に入れ替えるには、eachメソッドを使って、一つずつ移動させる必要があります。

$('#change01').change(function(){
  if ($(this).is(':checked')) {
    $('.after01').each(function() {
      $(this).after($(this).prev()).show();
    });
    $('.before01').hide();
  } else {
    $('.before01').each(function() {
      $(this).after($(this).prev()).show();
    });
    $('.after01').hide();
  }
});

おまけ

上記のコードは下記のようにシンプルにかけます。

$('#change01').change(function(){
  ($(this).is(':checked') ? $('.after01') : $('.before01'))
  .each(function() {
    $(this).after($(this).prev().hide()).show();
  });
});

Comments

[babystardust]

ありがとうございます！
思った通りに表示とソートができるようになりました。
詳しい解説に加えて、シンプルな書き方まで教えて頂いてとても勉強になりました。

ソート部分を省いてしまったために意図が伝わらず、混乱させてしまって申し訳ありません。
質問のhtmlをソート込みで書きなおしてみましたが、表示/非表示の入れ替えだと、チェックボックスにチェックを入れた後にthのAでソートしてもhtmlで先にある要素・内容01-1の値でソートされてしまい、内容01-2の値が表示されているのに並び順がおかしいことになってしまいました。
これを回避するために場所を入れ替えた上で要素を表示/非表示したく質問させていただきました。
でももしかしたら、もっとスマートな変換方法があるかもしれないですね…見つけたら試してみたいと思います(^^;)

[hatena19]

そうですか。
回答のコードは、該当クラスの前後を入れ替えるという仕様ですので（入れ替え要素をprev()で取得）、ソートによっては想定外の動作になる可能性がありますので、しっかり動作確認を行ってください。

[babystardust]

早速動作確認してみましたが、並び替える要素は全て前後で配置してますので特に問題なく動いています。
長いことつまずいていたので助かりました。
本当にありがとうございます！