sort()メソッドを使ってコンテンツを並べ替えるjs

数字を昇順に並べ替え

• 500
• 100
• 1500
• 2500
• 2000

$('ul.demo-01').each(function(){
    $(this).html(
        $(this).find('li').sort(function(a,b){
            return $(b).text() - $(a).text();
        })
    );
});

数字を降順に並べ替え

• 500
• 100
• 1500
• 2500
• 2000

$('ul.demo-02').each(function(){
    $(this).html(
        $(this).find('li').sort(function(a,b){
            return $(a).text() - $(b).text();
        })
    );
});

日付けを昇順に並べ替え

• 2017-10-26 00:00:00
• 2017-07-26 00:00:00
• 2017-11-26 00:00:00
• 2017-09-26 00:00:00
• 2017-12-26 00:00:00
• 2017-08-26 00:00:00

$('ul.demo-03 li').each(function(){
    //日付けをミリ秒変換してdate-date属性を付与
    var $date = $(this).text();
    dateFunc = function(){
        $date = $date.replace(/-| /g, ':').split(':');
        $date = new Date($date[0], $date[1] - 1, $date[2], $date[3], $date[4], $date[5]);
        return $date;
    };
    dateFunc($date);
    $date = $date.getTime();
    $(this).attr('data-date',$date);
});
$('ul.demo-03').each(function(){
    $(this).html(
        $(this).find('li').sort(function(a,b){
            return $(b).attr("data-date") - $(a).attr('data-date');
        })
    );
});

日付けを降順に並べ替え

• 2017-08-26 00:00:00
• 2017-12-26 00:00:00
• 2017-09-26 00:00:00
• 2017-11-26 00:00:00
• 2017-07-26 00:00:00
• 2017-10-26 00:00:00

$('ul.demo-04 li').each(function(){
    //日付けをミリ秒変換してdate-date属性を付与
    var $date = $(this).text();
    dateFunc = function(){
        $date = $date.replace(/-| /g, ':').split(':');
        $date = new Date($date[0], $date[1] - 1, $date[2], $date[3], $date[4], $date[5]);
        return $date;
    };
    dateFunc($date);
    $date = $date.getTime();
    $(this).attr('data-date',$date);
});
$('ul.demo-04').each(function(){
    $(this).html(
        $(this).find('li').sort(function(a,b){
            return $(a).attr("data-date") - $(b).attr('data-date');
        })
    );
});

デモの解説記事に戻る