リストの中の要素を所得して数値順に並びかえる

Question

リストの中の要素を取得して、数値順に並び替えることはできるのでしょうか？
例えば下記のようなリストでnameクラスの最後に数字を入れるとし、その数値順にliタグの表示を入れ替えることはできるのでしょうか？

クラスnameのテキストについてはバラバラになり、最後の数字は２桁になる可能性があります。

<ul id="sortlist">
  <li>
     <div class="name">hogehoge, 1</div>
     <div class="hoge">hogehoge</div>
  </li>
  <li>
     <div class="name">hogehoge, 3</div>
     <div class="hoge">hogehoge</div>
  </li>
  <li>
     <div class="name">hogehoge, 4</div>
     <div class="hoge">hogehoge</div>
  </li>
  <li>
     <div class="name">hogehoge, 2</div>
     <div class="hoge">hogehoge</div>
  </li>
</ul>

liタグのさらに子要素を取得して並び替える方法がわからなかったので、教えていただきたいです。

Comments

[kei344]

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

Answer 1

$(function(){
  $('#sortlist li').map(function(){
    return $(this);
  }).get().sort(function(x,y){
    var v1=x.find(".name").text();
    var v2=y.find(".name").text();
    return (v1==v2)?0:(v1>v2?1:-1);
  }).forEach(function(x){
    $('#sortlist').append(x);
  });
});

追記

条件追加

• テキストはバラバラ
• 数値は最後にでてくる1桁以上のものを拾う

$(function(){
  $('#sortlist li').map(function(){
    return $(this);
  }).get().sort(function(x,y){
    var v1=parseInt(x.find(".name").text().match(/\d+$/)[0]);
    var v2=parseInt(y.find(".name").text().match(/\d+$/)[0]);
    return (v1==v2)?0:(v1>v2?1:-1);
  }).forEach(function(x){
    $('#sortlist').append(x);
  });
});

<ul id="sortlist">
  <li>
     <div class="name">aaa, 1</div>
     <div class="hoge">bbb</div>
  </li>
  <li>
     <div class="name">ccc, 3</div>
     <div class="hoge">ddd</div>
  </li>
  <li>
     <div class="name">eee, 21</div>
     <div class="hoge">fff</div>
  </li>
  <li>
     <div class="name">ggg, 2</div>
     <div class="hoge">hhh</div>
  </li>
</ul>

Comments

[yambejp]

ちなみに今回はテキスト部分がおなじだったのでテキスト全体の文字列を使って
ソートしましたが、テキストの内容がかわるなら数値だけを抜き出して
ソートしないといけません。
その場合数字の出現箇所についてなんらかの決まりがあるなら提示が必要です

[ysfree14]

ご回答ありがとうございます。
テキストの部分は、全てバラバラの条件でソートしたいのです。
記述できておらず、申し訳ございません。
数字の出現箇所につきましては、全て一番最後に記述し、一桁だけではなく二桁になる可能性があります。

[yambejp]

条件を足して、修正版を追記しておきました

[ysfree14]

早速のご回答ありがとうございました、こちらで実装させていただこうと思います。

Answer 2

あらかじめソートするものを取得しておくといいです。

  var sorted = $('#sortlist>li')
    .map(function(index, element) {
      return {
        li: element,
        val: parseFloat($(element).find('.name').text().slice(-1))
      };
    })
    .get()
    .sort(function(a, b) {
      return a.val - b.val;
    });
  $.each(sorted, function(index, value) {
    var li = $(value.li);
    li.parent().append(li);
  });

Comments

[ysfree14]

ご回答ありがとうございます。
仮に最後の数字を２桁とする場合、.slice(-1)を.slice(-2)とし、01からスタートすればいいのでしょうか？

[x_x]

そうですね。ただのスペースでもよしなにしてくれるかと思います。

[ysfree14]

かしこまりました、ありがとうございました。