javascript - 按 unix 时间戳数据属性对元素进行排序

Question

我有 HTML 输出:

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

我通过 AJAX 使用 $(data).filter("div#bildirimlerdonen).html() 获取此 HTML block 并附加 (.html())到div.container。但正如您所看到的，我的所有 a 都有一个 data-tarih 属性，其中包含 UNIX 时间戳。

如何通过 UNIX 时间戳值对附加的 a 元素进行排序？

Answer 1

"Sort DOM Elements with jQuery"讨论这个。

应用到您的代码中，它看起来像这样:

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 的 .getAttribute() 代替 jQuery 的 $(...).attr() 以避免重新包装每个元素的成本。)