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

html
1<table>
2  <thead>
3    <th class="sort" data-sort="group-a">A</th>
4    <th class="sort" data-sort="group-b">B</th>
5    <th class="sort" data-sort="group-c">C</th>
6  </thead>
7  <tbody>
8    <tr>
9      <td class="group-a before01">内容01-1</td>
10      <td class="group-a after01">内容01-2</td>
11      <td class="group-b">内容02</td>
12      <td class="group-c">内容03</td>
13    </tr><tr>
14      <td class="group-a">内容04</td>
15      <td class="group-b before01">内容05-1</td>
16      <td class="group-b after01">内容05-2</td>
17      <td class="group-a">内容06</td>
18    </tr>
19・
20・
21・
22  <tbody>
23</table>
24
25<input type="checkbox" id="change01"><label for="change01">変更</label>
26

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

Jquery
1
2$('#change01').change(function(){
3  if ($(this).is(':checked')) {
4$('.after01').after($('.before01')).show();
5$('.before01').hide();
6} else {
7$('.before01').after($('.after01')).show();
8$('.after01').hide();
9}
10});

css
1.after01{display:none;}

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

kyoya0819

2019/09/25 02:31

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

babystardust

2019/09/25 02:38

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

yambejp

2019/09/25 02:53

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

babystardust

2019/09/25 03:05

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

行動規範の内容に同意します

回答1件

ベストアンサー

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

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

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

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

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

jquery
1$('#change01').change(function(){
2  if ($(this).is(':checked')) {
3    $('.after01').each(function() {
4      $(this).after($(this).prev()).show();
5    });
6    $('.before01').hide();
7  } else {
8    $('.before01').each(function() {
9      $(this).after($(this).prev()).show();
10    });
11    $('.after01').hide();
12  }
13});

おまけ

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

jquery
1$('#change01').change(function(){
2  ($(this).is(':checked') ? $('.after01') : $('.before01'))
3  .each(function() {
4    $(this).after($(this).prev().hide()).show();
5  });
6});

投稿2019/09/25 05:20

編集2019/09/25 06:12

hatena19

総合スコア33715

babystardust

2019/09/25 07:01

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