Sort elements by their unix timestamp data attribute

Question

I have HTML output:

 <div id='bildirimlerdonen'>            <a href="http://www.example.com/kupon-56097" data-tarih="1485534721">
            <div class="bi_b">
                <div class="bi_tip">
                    <div class="bi_tip_not"></div>
                </div>
                            <div class="bi_mesaj yenibildirim" style="background-color: #fccdee;">              
                                    <b class="pembeyazi">56097</b> nolu kuponunuz <span class="bi_kaybetti">kaybetti! <br>(28 BP kaçtı)</span>
                </div>
            </div>  
    </a>        
                                <a href="http://www.example.com/kupon-56096" data-tarih="1485278899">
            <div class="bi_b">
                <div class="bi_tip">
                    <div class="bi_tip_not"></div>
                </div>
                            <div class="bi_mesaj yenibildirim" style="background-color: #fccdee;">              
                                    <b class="pembeyazi">56096</b> nolu kuponunuz <span class="bi_kaybetti">kaybetti! <br>(71 BP kaçtı)</span>
                </div>
            </div>  
    </a>        
                                <a href="http://www.example.com/kupon-38583" data-tarih="1485278424">
            <div class="bi_b">
                <div class="bi_tip">
                    <div class="bi_tip_not"></div>
                </div>
                            <div class="bi_mesaj yenibildirim"  style="background-color: #fccdee;">             
                                    <b class="pembeyazi">38583</b> nolu kuponunuz <span class="bi_kazandi">kazandı! <br>(12 BP)</span>
                </div>
            </div>
            </a>
                            <a href="http://www.example.com/kupon-38584" data-tarih="1485278424">
            <div class="bi_b">
                <div class="bi_tip">
                    <div class="bi_tip_not"></div>
                </div>
                            <div class="bi_mesaj yenibildirim"  style="background-color: #fccdee;">             
                                    <b class="pembeyazi">38584</b> nolu kuponunuz <span class="bi_kazandi">kazandı! <br>(13 BP)</span>
                </div>
            </div>
            </a>
                            <a href="http://www.example.com/kupon-38599" data-tarih="1485278424">
            <div class="bi_b">
                <div class="bi_tip">
                    <div class="bi_tip_not"></div>
                </div>
                            <div class="bi_mesaj yenibildirim"  style="background-color: #fccdee;">             
                                    <b class="pembeyazi">38599</b> nolu kuponunuz <span class="bi_kazandi">kazandı! <br>(11 BP)</span>
                </div>
            </div>
            </a>
                    <a href="profil" data-tarih="1485429380">           
            <div class="bi_b" data-tarih="1485429380">
                <div class="bi_tip">
                    <div class="bi_tip_not"></div>
                </div>
                            <div class="bi_mesaj yenibildirim" style="background-color: #fccdee;">              
                                    <b class="pembeyazi">Profilinde</b> yeni bir yorum var!</span>
                </div>
            </div>  
    </a>        
                        <a href="profil" data-tarih="1485364886">           
            <div class="bi_b">
                <div class="bi_tip">
                    <div class="bi_tip_not"></div>
                </div>
                            <div class="bi_mesaj yenibildirim" style="background-color: #fccdee;">              
                                    <b class="pembeyazi">Profilinde</b> yeni bir yorum var!</span>
                </div>
            </div>  
    </a>        
                        <a href="profil" data-tarih="1483886267">           
            <div class="bi_b">
                <div class="bi_tip">
                    <div class="bi_tip_not"></div>
                </div>
                            <div class="bi_mesaj yenibildirim" style="background-color: #fccdee;">              
                                    <b class="pembeyazi">Profilinde</b> yeni bir yorum var!</span>
                </div>
            </div>  
    </a>        
                        <a href="profil" data-tarih="1472724338">           
            <div class="bi_b">
                <div class="bi_tip">
                    <div class="bi_tip_not"></div>
                </div>
                            <div class="bi_mesaj yenibildirim" style="background-color: #fccdee;">              
                                    <b class="pembeyazi">Profilinde</b> yeni bir yorum var!</span>
                </div>
            </div>  
    </a>        
                        <a href="profil" data-tarih="1466855037">           
            <div class="bi_b">
                <div class="bi_tip">
                    <div class="bi_tip_not"></div>
                </div>
                            <div class="bi_mesaj yenibildirim" style="background-color: #fccdee;">              
                                    <b class="pembeyazi">Profilinde</b> yeni bir yorum var!</span>
                </div>
            </div>  
    </a>        
                                    <a href="favori-getir--1214" data-tarih="1485549994">
            <div class="bi_b">
                <div class="bi_tip">
                    <div class="bi_tip_not"></div>
                </div>
                            <div class="bi_mesaj yenibildirim" style="background-color: #fccdee;">              
                                    <b class="pembeyazi">Favorilediğin bahiste</b> yeni bir yorum var!</span>
                </div>
            </div>  
    </a>        
                                    <a href="favori-getir--1281" data-tarih="1472475795">
            <div class="bi_b">
                <div class="bi_tip">
                    <div class="bi_tip_not"></div>
                </div>
                            <div class="bi_mesaj yenibildirim" style="background-color: #fccdee;">              
                                    <b class="pembeyazi">Favorilediğin bahiste</b> yeni bir yorum var!</span>
                </div>
            </div>  
    </a>        
                    </div>

I am fetching this HTML block with $(data).filter("div#bildirimlerdonen).html() via AJAX and appending (.html()) to div.container. But as you can see all of my a has a data-tarih attribute which contains UNIX timestamps.

How can I sort appended a elements via their UNIX timestamp values?

the presented html markup is invalid: opening `` tag is missed — RomanPerekhrest, Jan 27 '17 at 21:47

Ouroborus · Accepted Answer · 2017-01-27T21:46:30.430

1

"Sort DOM Elements with jQuery" talks about this.

Applied to your code, it looks like this:

var $container = $('#bildirimlerdonen'),
    $items = $('#bildirimlerdonen > a');

$items.sort(function(a,b){
    var an = a.getAttribute('data-tarih'),
        bn = b.getAttribute('data-tarih');

    if(an > bn) {
        return 1;
    }
    if(an < bn) {
        return -1;
    }
    return 0;
});

$items.detach().appendTo($container);

(Javascript's .getAttribute() is used instead of jQuery's $(...).attr() to avoid the cost of re-wrapping each element.)

edited Jan 27 '17 at 21:46

answered Jan 27 '17 at 21:41

Ouroborus

16,237
4
39
62

That was a great shot! Bingo. Thank you! – Lala Jan 27 '17 at 21:46
1

@Lala Just be aware there is [a quirk related to sorting by raw unix timestamps related to leap seconds](http://stackoverflow.com/a/16539483/367865). Rare but possible and nothing you can do about it if you only have those timestamps. – Ouroborus Jan 27 '17 at 21:50

Sort elements by their unix timestamp data attribute

1 Answers1