質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.03%

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 158

score 1

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

(1)ol,li の中身を逆順に表示
(2)<button>のテキスト変更(「昇順に並び替え」から「降順に並び替え」)

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

解決したいこと

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

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="">
<title>test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
   $(function(){
     $("#reverse").click(function(){
        var myArray= $.makeArray($("ol li"));
        myArray.reverse();
        $("ol").html($(myArray));
        if($("#reverse").text() === "昇順に並び替え") {
           $(this).text('降順に並び替え');

        } else {
           $(this).text('昇順に並び替え');
        }

     });

   });
   </script>
</head>

<body>
    <button id="reverse">昇順に並び替え</button>

    <ol>

    <li class="papers">りんご</li>
    <li class="papers">ごりら</li>
    <li class="papers">らっぱ</li>
    <li class="papers">ぱんつ</li>
    <li class="papers">つみき</li>

</ol>

</body>
</html>

自分で試したこと

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+2

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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="">
<title>test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
   $(function(){
     $("#reverse").click(function(){
        var myArray= $.makeArray($("ol li"));
        myArray.reverse();
        $("ol").html($(myArray));
        if($("#reverse").text() === "昇順に並び替え") {
           $("#list").removeAttr("reversed") // "reversed"を無効にする
           $(this).text('降順に並び替え');

        } else {
           $("#list").attr("reversed", "true") // "reversed"を有効にする
           $(this).text('昇順に並び替え');
        }

     });

   });
   </script>
</head>

<body>
    <button id="reverse">昇順に並び替え</button>

    <ol id="list" reversed>

    <li class="papers">りんご</li>
    <li class="papers">ごりら</li>
    <li class="papers">らっぱ</li>
    <li class="papers">ぱんつ</li>
    <li class="papers">つみき</li>

</ol>

</body>
</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2021/04/21 14:13

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

    キャンセル

+1

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

サンプル

     $("#reverse").click(function(){

        $("ol").toggleClass('reverse');
        if($("#reverse").text() === "昇順に並び替え") {
           $(this).text('降順に並び替え');

        } else {
           $(this).text('昇順に並び替え');
        }

     });
ol{
  display: flex;
  flex-direction: column;
}
ol.reverse{
  flex-direction: column-reverse;
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2021/04/21 14:25

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

    キャンセル

0

$(function(){
  $('#reverse').on('click',function(){
    $(this).text(function(){
      return $(this).text().replace(/[降昇](?=順)/,function(m){
        return {'降':'昇','昇':'降'}[m];
      })
    });
    $('ol').append($('.papers').get().reverse()).attr('reversed',function(){
      return $(this).attr('reversed')?null:'reversed';
    });
  });
});


※調整

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2021/04/21 14:23

    ありがとうございます。この書き方も今度試してみます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.03%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る