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
Post a Comment