Lala
Lala

Reputation: 63

Sort elements by their unix timestamp data attribute

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?

Upvotes: 0

Views: 454

Answers (1)

Ouroborus
Ouroborus

Reputation: 16885

"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.)

Upvotes: 1

Related Questions