jqueryソート関数とプリペンド/インサート後？

Question

私は、リストアイテムの日付とクラスに基づいてリストアイテムをソートする機能を持っています。遅れてしまって、疲れていて、欲求不満なので、ここで忘れていることは分かりません。

この関数は、クラスが.pinnedであるかどうかを最初に判断し、日付で並べ替えてリストの先頭に挿入する必要があります。

次に、アイテムの日付（data-dateにあります）を調べ、今日よりも前の場合は、クラス.pastを日付順に並べ替えて、固定したアイテムの後ろに挿入します。

最後に、残りのアイテムを並べ替えると、ここ.past

のクラスとの最後の項目は、コードされた後にそれらを挿入する必要があります。今のよう

//sort todo list-items by type and then date 
function sortTodo() { 
    var itemDate = ""; 
    var date = new Date(); 
    $(".todo-list-item").each(function() { 
    var itemDate = new Date($(this).data("date")); 
    if($(this).hasClass('pinned')) { 
     $(".todo-list-item.pinned").sort(function(a,b) { 
     return date > itemDate; 
     }).each(function() { 
      $(".todo-list").prepend(this); 
     }) 
    } else if(date > itemDate) { 
     $(this).addClass("past"); 
     $(".todo-list-item.past").sort(function(a,b) { 
      return date > itemDate; 
     }).each(function() { 
      $(".todo-list").prepend(this); 
     }) 
    } else { 
     $(".todo-list-item").not(".pinned, .past").sort(function(a,b) { 
     return date > itemDate; 
     }).each(function() { 
      $(".todo-list").append(this); 
     }) 
    } 
    }); 
} 

$(document).ready(function() { 
    sortTodo(); 
}); 

CODE PEN DEMO

新しいピン留めされたアイテムを追加しない限り、ピンポンディングされたアイテムを必要に応じて上に置かないスクリプトであり、アイテムクラスが変更されたり削除されたりしても日付によってソートされません。

Answer 1

最初のページの読み込み時に、固定された項目がリストの先頭にないのは、一覧内でToDoリストの先頭に追加される最初の項目だからです。

ページが読み込まれると、最初の項目が固定され、リストの先頭に追加されます。そして、item> itemDateのアイテムを見つけて、の前に、固定されたアイテムのの前にリストをループし続けます。

私が何を意味しているのか見てみましょう：固定された項目を順序付けられていないリストの最後の項目として入れて、HTMLを変更してみてください。

*申し訳 - 私はコメントを残すのに十分な担当者を持っていない...

Answer 2

あなたのコードは、かつての項目ごとに3つの別々のステップの要素をソートして動いています（！）。これは全体的な結果の順序を乱します。

を1回だけにソートし、並べ替えられたリストの異なるセクションを1つずつ追加します（jQuery .filter()が便利です）。完了すると、すべてのアイテムが並べ替えられます。

約Array#sortについて：trueまたはfalseを返すと機能しません。幸いなことに、お互いに日付を引くと、これらの種類の数字が正確に得られます。

以下は、ページ上のすべてのリストにわたってすべてのアイテムを並べ替えます。

// helper 
 
function appendToParent() { this.parentNode.appendChild(this); } 
 

 
$(function() { 
 
    var $items = $(".todo-list-item").sort(function(a, b) { 
 
    return new Date($(a).data("date")) - new Date($(b).data("date")); 
 
    }); 
 

 
    // append items by priority 
 
    $items.filter(".pinned").each(appendToParent); 
 
    $items.filter(".pinned.past").each(appendToParent); 
 
    $items.filter(":not(.pinned)").each(appendToParent); 
 
    $items.filter(":not(.pinned).past").each(appendToParent); 
 
});

.past { font-style: italic; } 
 
.pinned { color: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
List 1 
 
<ul class="todo-list"> 
 
    <li class="todo-list-item past" data-date="2017-05-03">Past Item 5</li> 
 
    <li class="todo-list-item" data-date="2017-06-04">Item 4</li> 
 
    <li class="todo-list-item pinned" data-date="2017-06-02">Item 1 (pinned)</li> 
 
    <li class="todo-list-item" data-date="2017-06-03">Item 3</li> 
 
    <li class="todo-list-item pinned past" data-date="2017-05-03">Past Item 2 (Pinned)</li> 
 
</ul> 
 

 
List 2 
 
<ul class="todo-list"> 
 
    <li class="todo-list-item past" data-date="2017-05-03">Past Item 5</li> 
 
    <li class="todo-list-item" data-date="2017-06-04">Item 4</li> 
 
    <li class="todo-list-item pinned" data-date="2017-06-02">Item 1 (pinned)</li> 
 
    <li class="todo-list-item" data-date="2017-06-03">Item 3</li> 
 
    <li class="todo-list-item pinned past" data-date="2017-05-03">Past Item 2 (Pinned)</li> 
 
</ul>

.pastクラスを切り替えることも簡単ですが、将来のある時点でここにすべての項目は、「過去になってしまうだろうので、私は上記のサンプルコードの外にそれを残してきました"、これはサンプルコードの目的に反するでしょう。

$items.each(function() { 
    $(this).toggleClass("past", new Date($(this).data("date")) < Date.now()); 
});