ソート要素が

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> 

私はdiv.containerに（.html()）AJAX経由$(data).filter("div#bildirimlerdonen).html()このHTMLブロックをフェッチして追加しています。 しかし、私のすべてaには、UNIXのタイムスタンプを含むdata-tarih属性があります。

追加されたa要素をUNIXのタイムスタンプ値でソートするにはどうすればよいですか？

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()のに使用されます。）