<button>をクリックするたびに<ol><li>の中身と番号を逆順にしたい

現在、ボタンをクリックすると、

（１）ol,li　の中身を逆順に表示
（２）<button>のテキスト変更（「昇順に並び替え」から「降順に並び替え」）

という処理をjQueryで書いています。
現状では<li>のテキストのみ入れ替わっています。

解決したいこと

<li>の数字も逆にしたい（1,2,3,4...から5,4,3,...に）

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<meta name="keywords" content="">
6<title>test</title>
7<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
8<script>
9   $(function(){
10     $("#reverse").click(function(){
11        var myArray= $.makeArray($("ol li"));
12        myArray.reverse();
13        $("ol").html($(myArray));
14        if($("#reverse").text() === "昇順に並び替え") {
15           $(this).text('降順に並び替え');
16   
17        } else {
18           $(this).text('昇順に並び替え');
19        }
20   
21     });
22    
23   });
24   </script>
25</head>
26
27<body>
28    <button id="reverse">昇順に並び替え</button>
29
30    <ol>
31    
32    <li class="papers">りんご</li>
33    <li class="papers">ごりら</li>
34    <li class="papers">らっぱ</li>
35    <li class="papers">ぱんつ</li>
36    <li class="papers">つみき</li>
37    
38</ol>
39
40</body>
41</html>

自分で試したこと

jQueryのreplaceWithで<ol>を<ol reversed>に書き換えようとしましたが、上手くいきません。

よろしくお願いいたします！

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

回答3件

ベストアンサー

降順リストを作る際は<ol>の"reversed"属性を使います。IE以外の全てのモダンブラウザでサポートされています。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<meta name="keywords" content="">
6<title>test</title>
7<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
8<script>
9   $(function(){
10     $("#reverse").click(function(){
11        var myArray= $.makeArray($("ol li"));
12        myArray.reverse();
13        $("ol").html($(myArray));
14        if($("#reverse").text() === "昇順に並び替え") {
15           $("#list").removeAttr("reversed") // "reversed"を無効にする
16           $(this).text('降順に並び替え');
17
18        } else {
19           $("#list").attr("reversed", "true") // "reversed"を有効にする
20           $(this).text('昇順に並び替え');
21        }
22
23     });
24
25   });
26   </script>
27</head>
28
29<body>
30    <button id="reverse">昇順に並び替え</button>
31
32    <ol id="list" reversed>
33
34    <li class="papers">りんご</li>
35    <li class="papers">ごりら</li>
36    <li class="papers">らっぱ</li>
37    <li class="papers">ぱんつ</li>
38    <li class="papers">つみき</li>
39
40</ol>
41
42</body>
43</html>

投稿2021/04/21 03:57

itepechi

総合スコア248

kodks

2021/04/21 05:13

やりたいことに一番近い記述でしたのでベストアンサーに選びました。ご回答ありがとうございました！

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

こんにちは。
フレックスレイアウトを使ってみてはどうでしょうか。

サンプル

js
1     $("#reverse").click(function(){
2        
3        $("ol").toggleClass('reverse');
4        if($("#reverse").text() === "昇順に並び替え") {
5           $(this).text('降順に並び替え');
6
7        } else {
8           $(this).text('昇順に並び替え');
9        }
10
11     });

css
1ol{
2  display: flex;
3  flex-direction: column;
4}
5ol.reverse{
6  flex-direction: column-reverse;
7}

投稿2021/04/21 03:53

Lhankor_Mhy

総合スコア36960

kodks

2021/04/21 05:25

ご回答ありがとうございました！cssの記述はできれば増やしたくないです。フレックスレイアウトでも今度書いてみますね。

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

javascript
1$(function(){
2  $('#reverse').on('click',function(){
3    $(this).text(function(){
4      return $(this).text().replace(/[降昇](?=順)/,function(m){
5        return {'降':'昇','昇':'降'}[m];
6      })
7    });
8    $('ol').append($('.papers').get().reverse()).attr('reversed',function(){
9      return $(this).attr('reversed')?null:'reversed';
10    });
11  });
12});