排序元素屬性

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

我正在與$(data).filter("div#bildirimlerdonen).html()經由AJAX獲取這個HTML塊和附加（.html()）至div.container。但正如你所看到的，我所有的a都有一個包含UNIX時間戳的data-tarih屬性。

如何通過UNIX時間戳值對附加的a元素進行排序？

來源

2017-01-27 Lala

呈現的HTML標記無效：打開''標籤錯過 – RomanPerekhrest

"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()代替，以避免重新包裝的每個元素的成本。）

來源

2017-01-27 21:41:02 Ouroborus

這是一個偉大的鏡頭！答對了。謝謝！ – Lala

@Lala請注意，[與閏秒相關的原始unix時間戳排序有關的怪癖問題]（http://stackoverflow.com/a/16539483/367865）。如果你只有這些時間戳，那麼很少但是可能的，而且你也無能爲力。 – Ouroborus

排序元素屬性

回答

相關問題