按日期对 div 进行排序（即 div id）

Question

我有结果页面。每个 div 都有带有事件日期 (Ymd) 的 id。如何按子 div 事件日期对“结果”div 中的那些 div 进行排序，如果日期为

<div class="results">
    <div class="item shadowbox route_entry" id="20150417">
        Content
    </div>
    <div class="item shadowbox route_entry" id="20150422">
        Content
    </div>
    <div class="item shadowbox route_entry" id="20150424">
        Content
    </div>
    <div class="item shadowbox route_entry" id="20150427">
        Content
    </div>
    <div class="item shadowbox route_entry" id="20150429">
        Content
    </div>
</div>

感谢您的帮助:)

Answer 1

你可以使用$.filter，像这样

var today   = new Date().getTime(),
    $result = $('.results > .item').clone(true).filter(function () {
        // get date 
        var date = $(this).attr('id').replace(/(\d{4})(\d{2})(\d{2})/,"$1-$2-$3");        
        // compare with current date, if <= today return true, and item will be in result, if return false item will be ignored 
        return new Date(date).getTime() > today;
    }).sort(function (a, b) {
        return +a.id - +b.id;
    });;

$('.results').html($result);

Example

Answer 2

这个 sn-p 过滤器和排序你的 div 的

// Get date string formatted as YYYYMMDD
var date = new Date();
var dateString = date.getFullYear() + ("0" + (date.getMonth() + 1)).slice(-2) + ("0" + (date.getDate())).slice(-2);

var $results = $('.results');
var $items = $results.children('.item');

// Detach items from results container
$items.detach();

// Filter items where date > today
$items = $items.filter(function(i, item){
  return item.id > dateString;
});

// Sort items by date
$items.sort(function(a,b){
  return a.id > b.id;
});

// Reappend filtered and sorted items back into container
$items.appendTo($results);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="results">
    <div class="item shadowbox route_entry" id="20150417">
        20150417
    </div>
    <div class="item shadowbox route_entry" id="20150422">
        20150422
    </div>
    <div class="item shadowbox route_entry" id="20150424">
        20150424
    </div>
    <div class="item shadowbox route_entry" id="20150427">
        20150427
    </div>
    <div class="item shadowbox route_entry" id="20150425">
        20150425
    </div>
</div>