排序元素属性

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

排序元素属性

回答

相关问题