0

jQueryで日付をソートする方法を理解することができましたが、特定の日付が正しくソートされておらず、ボタンの1つを押すと少しジャンプすることに気付きました。どうすればこれを解決できますか? コードをhttp://jsfiddle.net/Erah9/1/に投稿しました。これまでの私のコードは次のとおりです。

HTML

<div style="padding-top: 20px;">
<input class="btn" type="button" value="Oldest First" id="sortAsc"/>
<input class="btn" type="button" value="Newest First" id="sortDesc"/>
</div>

<div id="wrapper" style="padding-top: 20px">
        <ul>
        <li class='item'><div class='activity_date'>01/10/2012</div>
        <div class='activity_box'>
        <div class='activity_text' id='act'>Allocated request</div>
        </div></li><li class='item'><div class='activity_date'>03/10/2012</div>
        <div class='activity_box'>
        <div class='activity_text' id='act'>Failed request</div>
        </div></li><li class='item'><div class='activity_date'>08/10/2012</div>

        <!---------------- 
        SEE JS FIDDLE FOR MORE OF THIS
        ----------------->        

        </li>          
        </ul>
</div>

JS

   $(function(){ 
    var itemsArray = $('li.item');
    itemsArray.sort(function(a,b){
        var aTime = new Date($(a).find('.activity_date').text()).getTime();
        var bTime = new Date($(b).find('.activity_date').text()).getTime();
        return aTime - bTime;
    });

    $('#sortAsc').click(function(){
        $("#wrapper").empty();
        $(itemsArray).each(function(){
            $("#wrapper").prepend($(this));
        });
    });

    $('#sortDesc').click(function(){
        $("#wrapper").empty();
        $(itemsArray).each(function(){
            $("#wrapper").append($(this));
        });
    });
    });

どうもありがとう！事前に</p>

4

2 に答える 2

1

<li>にカプセル化せずにアイテムを追加してい<ul>ます。<li>順序付けされていないリストには、最初に表示されるデフォルトのマージンがありますが、ラッパーdivを空にして単一のアイテムのみを追加すると、そのマージンは破棄されます。

フィドルを更新して、最初にを作成し、次にアイテムを<ul>追加するようにしました：http: //jsfiddle.net/Erah9/5/<li>

並べ替えについて：どういうわけか、日付の日と月が混同されていると思います。このSOの問題の助けを借りて、私はいじくり回してそれを機能させました（そう思われます）

http://jsfiddle.net/Erah9/10/

于 2012-11-08T11:20:50.060 に答える
1

日付を正しく解析していません。たとえば、次の関数を使用する必要があります。

// parse a date in dd/mm/yyyy
function parseDate(input) {
   var parts = input.match(/(\d+)/g);
   // new Date(year, month [, date [, hours[, minutes[, seconds[, ms]]]]])
   return new Date(parts[2], parts[1]-1, parts[0]); // months are 0-based
}

さらに、並べ替え関数をパラメーター化できます。次に例を示します。

function sort(items, order)
{
    return items.sort(function(a,b){
        var ret = parseDate($(a).find('.activity_date').text()) > parseDate($(b).find('.activity_date').text());
        return (order == "asc") ? ret : !ret;
    });
}

使用方法は次のとおりです。

sort($('li.item'), "desc").each(function(){
    // make some use of the elements sorted in descending order
});

HTMLにエラーが含まれているだけでなく、たとえば、多くの要素で同じIDを使用しないでください。

于 2012-11-08T13:15:37.467 に答える