jqueryで表示される結果を制限する予定の最も近いイベントのリスト

Question

私はAdobe Business Catalystで作業しています。クライアントのエントリから結果を並べ替える方法が必要でした。彼らはすぐに来る映画を表示したい、私はアイテムを並べ替えるためのコードのこの素晴らしい部分を見つけた。

http://jsfiddle.net/thetrickster/7U3Xd/

<ul class="sort-list"> 
    <li class="sort-item" data-event-date="14-Feb-2013">Valentine's Day on 14-Feb-2013</li> 
    <li class="sort-item" data-event-date="25-Dec-2013">Christmas on 25-Dec-2013</li> 
    <li class="sort-item" data-event-date="14-Jul-2013">Bastille Day on 14-Jul-2013</li> 
    <li class="sort-item" data-event-date="01-Jan-2013">New Year's Day on 01-Jan-2013</li> 
    <li class="sort-item" data-event-date="31-Oct-2013">Halloween on 31-Oct-2013</li> 

</ul> 
(function($){ 
    var container = $(".sort-list"); 
    var items = $(".sort-item"); 

    items.each(function() { 
     // Convert the string in 'data-event-date' attribute to a more 
     // standardized date format 
     var BCDate = $(this).attr("data-event-date").split("-"); 
     var standardDate = BCDate[1]+" "+BCDate[0]+" "+BCDate[2]; 
     standardDate = new Date(standardDate).getTime(); 
     $(this).attr("data-event-date", standardDate); 

    }); 


    items.sort(function(a,b){ 
     a = parseFloat($(a).attr("data-event-date")); 
     b = parseFloat($(b).attr("data-event-date")); 
     return a>b ? -1 : a<b ? 1 : 0; 
    }).each(function(){ 
     container.prepend(this); 
    }); 

})(jQuery); 

/* This script sorts your list in descending order... to change it to ascending order change the "less than" operator (<) to "greater than" (>) */ 

これは、我々が表示されているすべての項目を持っているページのために完璧に動作しますが、次のステップは、ホームページに表示するための唯一の4つの最も今後のアイテムを得ることになります。彼らは日付でソートされた後にアイテムを追加するか、アイテムを制限する方法はありますか？

Answer 1

これを試してください（テストされていません）。ちょうど簡単なカウンタが追加されました。これはAngularjs filtering & sortを使用するのに最適なケースです。

あなたは、配列のフィルタ機能を使用することができます

<ul class="sort-list"> 
    <li class="sort-item" data-event-date="14-Feb-2013">Valentine's Day on 14-Feb-2013</li> 
    <li class="sort-item" data-event-date="25-Dec-2013">Christmas on 25-Dec-2013</li> 
    <li class="sort-item" data-event-date="14-Jul-2013">Bastille Day on 14-Jul-2013</li> 
    <li class="sort-item" data-event-date="01-Jan-2013">New Year's Day on 01-Jan-2013</li> 
    <li class="sort-item" data-event-date="31-Oct-2013">Halloween on 31-Oct-2013</li> 

</ul> 
(function($){ 
    var container = $(".sort-list"); 
    var items = $(".sort-item"); 

    var count = 0; 
    var limit = 4; 

    items.each(function() { 
     // Convert the string in 'data-event-date' attribute to a more 
     // standardized date format 
     var BCDate = $(this).attr("data-event-date").split("-"); 
     var standardDate = BCDate[1]+" "+BCDate[0]+" "+BCDate[2]; 
     standardDate = new Date(standardDate).getTime(); 
     $(this).attr("data-event-date", standardDate); 

    }); 


    items.sort(function(a,b){ 
     a = parseFloat($(a).attr("data-event-date")); 
     b = parseFloat($(b).attr("data-event-date")); 
     return a>b ? -1 : a<b ? 1 : 0; 
    }).each(function(){ 
     count ++ 
     if(limit && count <= limit){ 
      container.prepend(this); 
     } 
    }); 

})(jQuery); 

/* This script sorts your list in descending order... to change it to ascending order change the "less than" operator (<) to "greater than" (>) */ 

Answer 2

：

(function($){ 
    var container = $(".sort-list"); 
    var items = $(".sort-item"); 

    var count = 0; 
    var limit = 4; 

    items.each(function() { 
     // Convert the string in 'data-event-date' attribute to a more 
     // standardized date format 
     var BCDate = $(this).attr("data-event-date").split("-"); 
     var standardDate = BCDate[1]+" "+BCDate[0]+" "+BCDate[2]; 
     standardDate = new Date(standardDate).getTime(); 
     $(this).attr("data-event-date", standardDate); 

    }); 


    var topItems = items.sort(function(a,b){ 
     a = parseFloat($(a).attr("data-event-date")); 
     b = parseFloat($(b).attr("data-event-date")); 
     return a>b ? -1 : a<b ? 1 : 0; 
    }).filter(function(item, index){ 
     return index < 4; // filters the array to only items with index 3 or less i.e. the top 4 
    }).each(function(item){ 
     container.prepend(this); 
    }); 
})(jQuery); 

Answer 3

あなたはeachパラメータを利用することができる：TO

• インデックス、
• 要素

を服を着る

return a > b ? -1 : a < b ? 1 : 0; 

：

return !(a > b ? -1 : a < b ? 1 : 0); 

<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script> 
 

 
<!-- 
 

 
In your web app list layout you can use the following markup: 
 

 
<li class="sort-item" data-event-date="{tag_event date}"> 
 
    YOUR OTHER WEB APP TAGS HERE 
 
</li> 
 

 
This will work with your custom event date if your field is called "Event Date". If it has a different name, just insert your custom tag in the "data-event-date" attribute. 
 

 
--> 
 

 

 
<ul class="sort-list"> 
 
    <li class="sort-item" data-event-date="14-Feb-2013">Valentine's Day on 14-Feb-2013</li> 
 
    <li class="sort-item" data-event-date="25-Dec-2013">Christmas on 25-Dec-2013</li> 
 
    <li class="sort-item" data-event-date="14-Jul-2013">Bastille Day on 14-Jul-2013</li> 
 
    <li class="sort-item" data-event-date="01-Jan-2013">New Year's Day on 01-Jan-2013</li> 
 
    <li class="sort-item" data-event-date="31-Oct-2013">Halloween on 31-Oct-2013</li> 
 

 
</ul> 
 

 
<script> 
 
    (function ($) { 
 
    var container = $(".sort-list"); 
 
    var items = $(".sort-item"); 
 

 
    items.each(function() { 
 
     // Convert the string in 'data-event-date' attribute to a more 
 
     // standardized date format 
 
     var BCDate = $(this).attr("data-event-date").split("-"); 
 
     var standardDate = BCDate[1] + " " + BCDate[0] + " " + BCDate[2]; 
 
     standardDate = new Date(standardDate).getTime(); 
 
     $(this).attr("data-event-date", standardDate); 
 

 
    }); 
 

 

 
    items.sort(function (a, b) { 
 
     a = parseFloat($(a).attr("data-event-date")); 
 
     b = parseFloat($(b).attr("data-event-date")); 
 
     return !(a > b ? -1 : a < b ? 1 : 0); 
 
    }).each(function (index, element) { 
 
     // 
 
     // parameters: index, element 
 
     // 
 
     if (index < 4) { 
 
     container.prepend(element); 
 
     } else { 
 
     $(element).hide(); 
 
     } 
 
    }); 
 

 
    })(jQuery); 
 
</script>

トンの結果は、プリペンドを使用して、あなたからのソートの順序を逆にする必要があります