javascript - 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 fetching html block $(data).filter("div#bildirimlerdonen).html() via ajax , appending (.html()) div.container. can see of a has data-tarih attribute contains unix timestamps.

how can sort appended a elements via unix timestamp values?

"sort dom elements jquery" talks this.

applied code, looks this:

var $container = $('#bildirimlerdonen'),     $items = $('#bildirimlerdonen > a');  $items.sort(function(a,b){     var = 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() used instead of jquery's $(...).attr() avoid cost of re-wrapping each element.)


Comments

Popular posts from this blog

python - How to insert QWidgets in the middle of a Layout? -

python - serve multiple gunicorn django instances under nginx ubuntu -

module - Prestashop displayPaymentReturn hook url -