2012-02-06 63 views
0

以下的号码DOM是重复类:jQuery的排序基于

<div class="inner"> 
      <p> 
        Text1 
        <span class="plus"> 25</span> 
        <span class="minus">12</span> 
      </p> 
</div> 



<div class="inner"> 
       <p> 
         Text2 
         <span class="plus"> 205</span> 
         <span class="minus">2</span> 
       </p> 
    </div> 

我有两个HREF标记作为排序按钮:

<a href="#" id="pos">Sort by Positive.</a> 
<a href="#" id="neg">Sort by Negative.</a> 

通过jQuery的,我怎么能重新渲染dom,<p>根据按钮点击排序。

小提琴位于here

回答

3

喜欢的东西:

$("#pos").click(function(e){ 
    e.preventDefault(); 

    $('.inner').sort(function (a, b) { 
    return parseInt($('.plus', a).text(), 10) - parseInt($('.plus', b).text(), 10); 
    }) 
    .appendTo('div.main'); 
}); 

$("#neg").click(function(e){ 
    e.preventDefault(); 

    $('.inner').sort(function (a, b) { 
    return parseInt($('.minus', a).text(), 10) - parseInt($('.minus', b).text(), 10); 
    }) 
    .appendTo('div.main'); 
}); 

http://jsfiddle.net/pHyDm/8/

虽然两个功能基本上是相同的,并可能/可能应该重构了一下。