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块并将.html()）附加到div.container。但是你可以看到我的所有a都有一个包含UNIX时间戳的data-tarih属性。

如何通过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()，以避免重新包装每个元素的成本。）

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

1 个答案: