Sort divs by date (which is div id)

Question

I have results page. Each div has id with event date (Ymd). How can i sort those div's in "results" div by child div event date and eliminate div if the date is < OR = today? It should be really easy to do, but i'm not so good at jquery. Also it would be very great to have ability to change "today" variable time zone.

<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>

Thanks for help :)

Oleksandr T. · Answer 1 · 2015-04-22T14:23:49.920

3

You can use $.filter, like so

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

edited Apr 22 '15 at 14:23

answered Apr 22 '15 at 12:31

Oleksandr T.

76,493
17
173
144

it works :) thank you for your help :) it works as i wanted :) – MIC Apr 22 '15 at 14:41

score 2 · Accepted Answer · answered Apr 22 '15 at 12:45

This snippet filters and sorts your div's

// 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>

Thanks @sw_double works just perfect. How can i set timezone for date variable? — MIC, Apr 22 '15 at 14:14
I guess your best bet would be to use some timezone library. Moment Timezone http://momentjs.com/timezone/ or timezone-js https://github.com/mde/timezone-js See this question for more information http://stackoverflow.com/questions/10087819/convert-date-to-another-timezone-in-javascript — Konstantin L, Apr 22 '15 at 17:55

Sort divs by date (which is div id)

2 Answers2